Geek Answers Handbook

Best way to hide a hidden div in jQuery?

I finally found a way to make this work, but the code dragged on a bit, and I'm sure there is a better way to do this. This is what I want, but I want to extend this to work on 10 or so divs, and the code would be funny if I used this method. I tried playing with the .each () method, but that just leads to further disappointment. If someone could point me in the right direction, I would be very obliged. Here is what I mean: http://jsfiddle.net/QbsbD/47/

$(document).ready(function() { $('#btn1').click(function() { if ('#div2:visible') { $('#div2').hide('fast'); } if ('#div3:visible') { $('#div3').hide('fast'); } $('#div1').slideToggle("slow"); }); $('#btn2').click(function() { if ('#div1:visible') { $('#div1').hide('slow'); } if ('#div3:visible') { $('#div3').hide('slow'); } $('#div2').slideToggle("slow"); }); $('#btn3').click(function() { if ('#div1:visible') { $('#div1').slideUp('slow'); } if ('#div2:visible') { $('#div2').slideUp('slow'); } $('#div3').slideToggle("slow"); }); });​
+4
source share
4 answers

Html :

 <input type="button" value="Show Div1" class="buttons" data-content-id="div1"/> <input type="button" value="Show Div2" class="buttons" data-content-id="div2" /> <input type="button" value="Show Div3" class="buttons" data-content-id="div3" />

JS :

 $('#container').on('click', '.buttons', function() { var content = $(this).data('contentId'); $('.hdDivs').not('#' + content).hide('slow'); $('#' + content).slideToggle("slow"); });

You save which div you want to display using attr data, then you will get it when you click the button.

demo

+1
source

I edited your code. Try now:

http://jsfiddle.net/QbsbD/48/

New JS:

 $(document).ready(function() { $('.buttons').click(function() { $('.hdDivs').hide('slow'); $('#' + $(this).attr('divid')).slideToggle("slow"); }); });​

I added an association (division) between the div and buttons as follows:

 <input type="button" value="Show Div1" class="buttons" id="btn1" divid="div1" /> <input type="button" value="Show Div2" class="buttons" id="btn2" divid="div2" /> <input type="button" value="Show Div3" class="buttons" id="btn3" divid="div3" />
+3
source

You can go to the index of the pressed buttons!

 $('.buttons').click(function(){ var DIV = $('.hdDivs').eq( $(this).index() ); DIV.is(':visible') ? DIV.slideToggle() : ($('.hdDivs').slideUp(), DIV.slideDown()); });

jsFiddle demo

PS .. if you don't like the slide effect, just replace it with .show('slow') and .hide('slow') and .toggle('slow') :

 DIV.is(':visible') ? DIV.toggle('slow') : ($('.hdDivs').hide('slow'), DIV.show('slow'));
0
source

I would use this function:

  .siblings()

check it out on the jquery website: http://api.jquery.com/siblings/

here is jsfiddle: http://jsfiddle.net/mcLyv/2/

 $(document).ready(function() { $('.buttons').click(function() { var index = $(this).attr('id').substring(3); $('.container') .find('.hdDivs') .eq(index-1) .slideToggle("slow") .siblings() .hide('slow'); }); });​
0
source

More articles: