Hide, Show, HIDE / SHOWALL

Question

Here is the code: http://jsfiddle.net/t2nite/KCY8g/

I created these hiding fields using jquery.

In each window there is a text and a button "SHOW" and "Hide" . I am trying to create a "SHOW / HIDE all" button.

But when I tried the code below, the whole button disappears.

$("#btn").toggle(function() { $(".para2, .para3, .para4").hide(200); $(".para2, .para3, .para4").show(200); }); 

This is the closest access to what I want.

 $("#btn").click(function() { $(".para2, .para3, .para4").toggle(200); }); 

The code above works, but instead of hiding or showing all the fields, it simply switches them between hiding and showing. Reference.

I want the content to be hidden and the buttons are not in the para-classes.

Answer 1

You need to go through each element to check whether they are hidden or not. It really depends on whether you want to hide them all first or show them all. Here is what you need:

 // To toggle each element state $("#btn").click(function() { $(".para2, .para3, .para4").each(function (index, element) { if ($(this).is(':visible')) { $(this).hide(200); } else { $(this).show(200); } }); }); // To show all and hide all afterwards or vice-versa (change the attr check) $("#btn").click(function() { if ($(this).attr('data-show')) { $(".para2, .para3, .para4").show(200); $(this).attr('data-show', false); } else { $(".para2, .para3, .para4").hide(200); $(this).attr('data-show', true); } }); // To hide all if one is shown $("#btn").click(function() { var oneShown = false; $(".para2, .para3, .para4").each(function (index, element) { if ($(this).is(':visible')) { oneShown = true; } }); if (oneShown) { $(".para2, .para3, .para4").hide(200); } else { $(".para2, .para3, .para4").show(200); } }); 

Answer 2

You want to use both callbacks in the .toggle event :

 $("#btn").toggle(function() { $(".para2, .para3, .para4").hide(200); }, function() { $(".para2, .para3, .para4").show(200); }); 

Fiddle: http://jsfiddle.net/gromer/CDEMS/

I assume you tried to switch how?

Answer 3

I think you need the following:

 $("#btn").data('tgl','hide').click(function() { if ($(this).data('tgl') == 'hide') { $(".para2, .para3, .para4").hide(200); $(this).data('tgl','show'); } else { $(".para2, .para3, .para4").show(200); $(this).data('tgl','hide'); } }); 

Watch a working demo

Answer 4

I made some changes to using classes, not elements with specific identifiers, so you can do this based on behavior (thus requiring less code and making it easier to add or remove itsawrap elements).

HTML:

 <div id="showall"><button id="btn">HIDE/SHOW ALL</button></div> <div class="itsawrap"> <button class="hide">HIDE</button> <button class="show">SHOW</button> <p class="para2">"Who you callin' pinhead?"</p> <p id="btm" class="para2">- Patrick Star</p> </div> <div class="itsawrap"> <button class="hide">HIDE</button> <button class="show">SHOW</button> <p class="para3">"He was a good man, what a rotten way to die."</p> <p id="btm" class="para3">- JC Denton</p> </div> <div class="itsawrap"> <button class="hide">HIDE</button> <button class="show">SHOW</button> <p class="para4">"Wooooooooo!!"</p> <p id="btm" class="para4">- Ric Flair</p> </div> 

JS:

 $("#btn") .data('shown', true) .click(function() { var mode = $(this).data('shown') ? 'hide' : 'show'; $('.itsawrap p')[mode](200); $(this).data('shown', mode == 'show'); }); $('.itsawrap').on('click', '.hide', function() { $(this).parent().find('p').hide(200); }).on('click', '.show', function() { $(this).parent().find('p').show(200); }); 

jsFiddle

Answer 5

All your code can be condensed into three events here .. Try this approach ..

 $("#btn").toggle(function() { $(".para2, .para3, .para4").hide(200); }, function() { $(".para2, .para3, .para4").show(200); }); $("[id^='hide']").click(function() { $(this).closest('div').find('p').hide(200); }); $("[id^='show']").click(function() { $(this).closest('div').find('p').show(200); $('.itsawrap').not($(this).closest('div')).find('p').hide(200); }); 

CHECK FIDDLE