Hide a div when another div is shown

Question

I have 4 divs, two of them are shown on click (link), and hidden the same way. When I click the link for the other 2 divs, the first 2 should be hidden again and the other way around. Right now all 4 divs would be shown if the 2 links were clicked.

Easy: click link>show div; click second link>show second div while hiding fist div

The 2 links:

 <a class="show_hideAbout show_hideAboutArr" href="#" >About</a> <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

First 2 divs:

<div class="slidingDivAbout">Some Content</div> <div class="slidingDivAboutArr"> <img src="img/dropdownarrow.png" width="24" height="12" alt=""> </div>

Other 2 divs:

<div class="slidingDivContact">Some Content</div> <div class="slidingDivContactArr"> <img src="img/dropdownarrow.png" width="24" height="12" alt=""> </div>

And my script:

$(document).ready(function() { $(".slidingDivAbout").hide(); $(".show_hideAbout").show(); $('.show_hideAbout').click(function() { $(".slidingDivAbout").slideToggle(350); }); $(".slidingDivAboutArr").hide(); $(".show_hideAboutArr").show(); $('.show_hideAboutArr').click(function() { $(".slidingDivAboutArr").fadeToggle("fast", "linear"); }); $(".slidingDivContact").hide(); $(".show_hideContact").show(); $('.show_hideContact').click(function() { $(".slidingDivContact").slideToggle(350); }); $(".slidingDivContactArr").hide(); $(".show_hideContactArr").show(); $('.show_hideContactArr').click(function() { $(".slidingDivContactArr").fadeToggle("fast", "linear"); }); });

what is your question? and there is no use of using multiple $(document).ready they will fire in the defined order so one would be enough — JIA
– JIA, Commented May 28, 2012 at 16:47
@thecodeparadox. He loves his DOM well ready... ummm I meant well done. :) — gdoron
– gdoron, Commented May 28, 2012 at 16:48
Ah, sorry, I'm really new to javascript, and didn't know about that. — Jean
– Jean, Commented May 28, 2012 at 16:48

thecodeparadox · Accepted Answer · 2012-05-28 17:28:22Z

Without change your markup you can use this:

$(document).ready(function() { $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0); $('.show_hideAbout').click(function() { $(".slidingDivContact").slideUp(300, function() { $(".slidingDivContactArr").fadeOut(300, function() { $(".slidingDivAbout").slideToggle(350, "linear", function() { $(".slidingDivAboutArr").fadeToggle(350); }); }); }); }); $('.show_hideContact').click(function() { $(".slidingDivAbout").slideUp(300, function() { $(".slidingDivAboutArr").fadeOut(300, function() { $(".slidingDivContact").slideToggle(350, function() { $(".slidingDivContactArr").fadeToggle(350, "linear"); }); }); }); }); });

Working Sample

Best answer so far. But I got one problem left: I have another link on the page that triggers the same funktion as one of the other links, and it's hidden now (the link text).
Just figured it out. It was the css hiding the links. I guess the script is doing that part now?!
One last thing maybe: how do I make the slidingDivContactArr animation start at the same time, as the slidingDivContact is animated? It seems that the slidingDivContactArr is only starting to appear, when the slidingDivContact has finished its animation.
How do I do that? Sorry, but it's the first time, I have to deal with javascript..

mattematico · Accepted Answer · 2012-05-28 17:29:54Z

Hi I would have done it like this jsfiddle example

HTML

<a class="show_hideAbout" href="#" >About</a> <a class="show_hideContact" href="#" >Contact</a> <div class="slidingDivAbout">Some Content1</div> <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> <div class="slidingDivContact">Some Content2</div> <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>

script

$(function(){ $('.slidingDivAbout').hide(); $('.slidingDivAboutArr').hide(); $('.slidingDivContact').hide(); $('.slidingDivContactArr').hide(); $('.show_hideAbout').click(function() { $('.slidingDivAbout').show(350); $('.slidingDivAboutArr').show() $('.slidingDivContact').hide(); $('.slidingDivContactArr').hide(); }); $('.show_hideContact').click(function() { $('.slidingDivContact').show(350); $('.slidingDivContactArr').show('fast', 'linear'); $('.slidingDivAbout').hide(); $('.slidingDivAboutArr').hide(); }); });

Aymen · Accepted Answer · 2012-05-28 17:05:17Z

for each link you should bind the click once.

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a> <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

the 2 following are duplicates since they bind the click to the same tag. class="show_hideAbout show_hideAboutArr")

$('.show_hideAbout').click(function(){ $(".slidingDivAbout").slideToggle(350); }); $('.show_hideAboutArr').click(function(){ $(".slidingDivAboutArr").fadeToggle("fast", "linear"); });

keep only one. and

$('.show_hideAbout').click(function(){ $(".slidingDivAbout").slideToggle(350); $(".slidingDivAboutArr").fadeToggle("fast", "linear"); });

Jahnold · Accepted Answer · 2012-05-28 17:17:10Z

I think it's better to do this with CSS classes rather than a load of hide/show methods. The HTML would look something like:

<a class="showAbout" href="#" >About</a> <a class="showContact" href="#" >Contact</a> <div id='wrapper'> <div class="about"> <div class="slidingDivAbout">Some Content 1</div> <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div> <div class="contact"> <div class="slidingDivContact">Some Content 2</div> <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div> </div>

With two CSS rules:

#wrapper > div { display: none; } #wrapper > div.show { display: block; }

And then the jQuery:

$(function() { $(document).on('click', '.showAbout', function() { $('.about').siblings('div').removeClass('show').end().toggleClass('show'); }); $(document).on('click', '.showContact', function() { $('.contact').siblings('div').removeClass('show').end().toggleClass('show'); }); });

Marius Ilie · Accepted Answer · 2012-05-28 17:22:40Z

Maybe try something like this?

<a class="show_hideAbout" href="#" >About</a> <a class="show_hideContact" href="#" >Contact</a> <div class="divAbout"> <div class="slidingDivAbout">Some Content</div> <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div> <div class="divContact"> <div class="slidingDivContact">Some Content</div> <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div>

And the javascript:

$(document).ready(function() { $(".divAbout").hide(); $(".divContact").hide(); $('.show_hideAbout').click(function() { if( $(".divContact").is(":visible") ) { $(".divContact").slideToggle(350, 'linear', function(){ $(".divAbout").slideToggle(350, 'linear'); }); } else { $(".divAbout").slideToggle(350, 'linear'); } }); $('.show_hideContact').click(function() { if( $(".divAbout").is(":visible") ) { $(".divAbout").slideToggle(350, 'linear', function(){ $(".divContact").slideToggle(350, 'linear'); }); } else { $(".divContact").slideToggle(350, 'linear'); } }); });

I know, but it's more about the logic. The way to do it is to combine selectors and/or create some functions to show/hide divs. Some extra classes for that divs would also be good
Works so far, is there a way to let the div collapse (with animation) first and the show the other?

chucktator · Accepted Answer · 2012-05-28 17:40:38Z

I would use a custom attribute in your html tag:

Here's a working demo

HTML:

<a class="slidingLink" slide="about" href="#" >About</a> <a class="slidingLink" slide="contact" href="#" >Contact</a> <div class="slidingContainer" id="about"> <div>Some Content</div> <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div> <div class="slidingContainer" id="contact"> <div>Some Content</div> <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div> </div>

JavaScript:

$(document).ready(function(){ $('.slidingContainer').hide(); $('.slidingLink').click(function () { var toSlide = $(this).attr("slide"); $("#"+toSlide).slideDown(350); $('.slidingContainer').each(function () { if ($(this).attr("id") != toSlide) { $(this).slideUp(350); } }); }); });

This is absolutely generic, so all you have to do to add new links is add a new a tag with the slide attribute set to the id of a div with the class slidingContainer.

Collectives™ on Stack Overflow

Hide a div when another div is shown

6 Answers 6

9 Comments

Comments

Comments

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

Comments

Comments

3 Comments

Comments

Related