addEventListener (show/hide) - javascript

I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?

I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}

Related

Close div when clicking Background div

I want to close a Div when i click on the Background div(SearchBlur).
My problem is if i click on the shown div it closes also.
here is my javascrip code
SearchBlur.addEventListener('click', closePopup);
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
}
here my html
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">
</div>
</div>
</div>
</div>
the Programm looks like this
i want to close the popup wehn i click on the dark background
sorry for my bad english :D
Use event.stopPropagation(); onclick the child you want
var counter = 1;
$( ".SearchBlur" ).on( "click", function() {
if(counter == 1){
$( "#search_input" ).animate({ "left": "-300px"}, "normal" );
$('.SearchBlur').fadeOut("normal");
counter = 0;
}
});
$( ".div_container" ).on( "click", function() {
event.stopPropagation();
});
.SearchBlur{
background:blue;
}
.div_container{
width:100px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SearchBlur" id="SB_Back">
<div class="div_container" id="container">
<div class="grid_div">
<div id="gridwrapper">div_container
</div>
</div>
</div>
</div>
Try add a listener to the child div with following code
event.stopPropagation();
Which div are you trying to close?
From what I can see, you're fading out the highest level div, so all markup nested within SearchBlur will also be hidden. I assume you want to target a deeper nested div, for example:
function closePopup(){
if(counter == 1){
$( "#search_input" ).animate({ "left": "-=300px"}, "normal" );
$('.div_container').fadeOut("normal");
counter = 0;
}
}
In a simple way your html looks like:
<div class="blur">
<div class="popup"></div>
</div>
Your JS is just like this:
$('.blur').on('click', function (e){
if (e.target === this)
$(this).fadeOut();
});
Here is codepen: https://codepen.io/alexmoronto/pen/xaKvxg

Loop using jquery and javascript

I'm having some trouble thinking of how to do this properly.
Right now, I have some jquery that looks like this:
$( "#person_0" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_0" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_0" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_0" ).show();
});
$( "#person_1" ).click(function() {
$( "[id^=person_]" ).removeClass("active");
$( "#person_1" ).addClass("active");
$( "[id^=bio_]" ).hide();
$( "#bio_1" ).show();
$( "[id^=hoverInfo_]" ).hide();
$( "#hoverInfo_1" ).show();
});
...
...
Essentially, if you click a person_0 div id, a class of active is added to that and both hoverInfo_0 and bio_0 show up. At the same time, all other ids go and hide (for example, hoverInfo_1, hoverInfo_2, bio_1, bio_2, etc.
This is super inefficient because I want there to be 100+ person_ ids. I feel like I'm overlooking something obvious.
Pseudo code right now:
if person_0 div is clicked
give person_0 div active class
show hoverInfo_0
show bio_0
hide all other hoverInfo_# (say 1-1000)
hide all other bio_# (say 1-1000)
else if person_1 div is clicked
give person_1 div active class
show hoverInfo_1
show bio_1
hide all hoverInfo_# (say 1-1000) that does not equal hoverInfo_1
hide all bio_# (say 1-1000) that does not equal bio_1
else if ...
else if ...
I'm having a hard time trying to figure out how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?
how I can loop this around or use a variable in place of the _# value
to make this more efficient. Any thoughts?
Try this approach using starts with and filter
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
Demo
$( "[id^='person_']" ).click(function() {
var id = $( this )[0].id;
console.log(id);
var counter = id.split("_").pop();
$( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active");
$( "[id^='bio_']" ).hide().filter( "#bio_" + counter ).show();
$( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});
.bio, .hoberInfo
{
display: none;
background-color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="person_1">Person 1</div>
<div id="bio_1" class="bio">Bio 1</div>
<div id="hoverInfo_1" class="hoberInfo">HoverInfo 1</div>
<div id="person_2">Person 2</div>
<div id="bio_2" class="bio">Bio 2</div>
<div id="hoverInfo_2" class="hoberInfo">HoverInfo 2</div>
<div id="person_3">Person 3</div>
<div id="bio_3" class="bio">Bio 3</div>
<div id="hoverInfo_3" class="hoberInfo">HoverInfo 3</div>

jQuery fade toggle multiple divs

I'm trying to set up a toggle where when one div is toggled to visible, the other will toggle to hidden. Clicking on "trigger one" toggles div "one" and clicking on "trigger two" toggles div "two". I'm basically looking for a way to make sure that only one of the divs is visible at one time (div one and div two should never both be visible, although both can be hidden).
I'm assuming some kind of if statement but my javascript is not great! Any help would be much appreciated.
HTML:
<a id="trigger-one" href="#">Trigger one</a>
<a id="trigger-two" href="#">Trigger two</a>
<div class="one">Here's one</div>
<div class="two">Here's two</div>
jQuery:
$( document ).ready(function() {
$( "#trigger-one" ).click(function() {
$( ".one" ).fadeToggle( "125", "swing" );
return false;
});
});
$( document ).ready(function() {
$( "#trigger-two" ).click(function() {
$( ".two" ).fadeToggle( "125", "swing" );
return false;
});
});
Here's one way:
$("a").click(function () {
$('div').eq($(this).index()).fadeToggle("125", "swing");
$('div:not(":eq('+$(this).index()+')")').fadeOut()
});
jsFiddle example

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE
You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo
Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.
You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo
Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo
Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo
It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.
see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()
You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

Categories