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.
Related
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>
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
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');
});
In the following code I am only able to click on any of the following HTML elements the Loader Element in <a></a> is displaying from the second click its not showing anything. All works only for first time and its not working from second click. Can anyone have a look for me? Thanks.
<li><a id="OVERALL_VALUE" href="javascript:void(0)" onclick="setTopDeals('OVERALL_VALUE')" class="topdeal">Top Deals</a></li>
<li><a id="PRICE" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li>
<li><a id="QUALITY" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li>
<li><a id="list" href="javascript:void(0)" class="list">List View</a></li>
<li><a id="grid" href="javascript:void(0)" class="gallery">Gallery</a></li>
<li><a id="map" href="javascript:void(0)" class="map">Map View</a></li>
Display loader
<a id="ajaxload_more3" style="display:none; width:200px; height:80px; border:1px solid #000; opacity:0.8; border-radius:10px; padding-top:20px; padding-bottom:25px; position:fixed; top:50%; left:50%; z-index:1000; text-align:center; background-color:#997CE6;"><table align="center"><tr height="50"><td><img src="images/ajaxload.gif" height="50" width="50" /></td></tr><tr height="35"><td><span style="font-size:20px; color:#FFF;">Loading</span></td></tr></table></a>
Script
<script type="text/javascript">
$( "#OVERALL_VALUE" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "#PRICE" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "#QUALITY" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "#list" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "#grid" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "#map" ).click(function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
</script>
Gosh, you should first consider Don't repeat yourself. All are doing the same operations then why a separate selector? Instead use class or directly element selectors
$( "li" ).on('click', 'a', function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
Since you are loading DOM elements dynamically (AFTER LOADING the Javascript).. Click events are not bound to the new appended elements..
In such situations you have to use "On" or "Live" binding. Live binding is deprecated hence I would suggest you to use "on" binding...
Here is the working code snippet alternative for your Javascript.. Try it..
<script type="text/javascript">
$( "body" ).on("click", "#OVERALL_VALUE", function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
$( "body" ).on("click, "#PRICE", function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
//CONVERT ALL THE ELEMENTS JUST LIKE THAT
</script>
I hope this helps. thank you!
BETTER APPROACH
And as suggested by another member.. Don't repeat yourself..
Instead.. Convert your HTML in to this :
<li><a id="PRICE" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('PRICE')" class="price">Price</a></li>
<li><a id="QUALITY" class="ajaxLoadIt" href="javascript:void(0)" onclick="setTopDeals('QUALITY')" class="quality">Star Rating</a></li>
<li><a id="list" class="ajaxLoadIt" href="javascript:void(0)" class="list">List View</a></li>
<li><a id="grid"class="ajaxLoadIt" href="javascript:void(0)" class="gallery">Gallery</a></li>
<li><a id="map" class="ajaxLoadIt"" href="javascript:void(0)" class="map">Map View</a></li>
And the script :
<script type="text/javascript">
$( "body" ).on("click", ".ajaxLoadIt", function() {
$( "#ajaxload_more3" ).show("slow");
$("#ajaxload_more3").delay(6000).fadeOut("slow");
});
//CONVERT ALL THE ELEMENTS JUST LIKE THAT
</script>
You don't see it anymore since at the end of the fadeOut function the DOM element's display is none. You should add your customised logic what to do after the fade out process has been completed
Try to add "#" instead of "javascript:void(0)" or else just remove the HREF attribute
I have very basic problem, actually it's look Here. I want to separate two buttons.
jQuery
$( "span" ).click(function() {
$( "p" ).toggle( "slow" );
});
HTML
<span>↓ Hobby </span>
<p class="contentDiv" >Such interesting text, eh?</p>
<br> <br>
<span>↓ Sport </span>
<p class="contentDiv" >Such interesting text, eh?</p>
I was trying by getElementById but it doesn't work.
I'm beginner, be patient.
When you are using $('p') you are selecting all p elements, you need to specify like this
$( "span" ).click(function() {
$(this).next().toggle();
});
Try this.
$( "span" ).click(function() {
$(this).closest('p').toggle();
});