Geek Answers Handbook

Is there a way to get $ .toggle () to switch already hidden children in sequence?

I have an application in which data sets can be filtered at different levels, and - for performance reasons - it would be nice to be able to independently display the corresponding output of nested divs. The problem arises because it switches the display property back to its original state on a hidden child device, but it will not change it to none if one of its ancestors is already hidden .

To reproduce: this JSFiddle ,

  • Click the "Switch 3" button, and then the "Switch 2" button.
  • By clicking the "switch 3" button and then the "switch 2" button, you will find 3 recovered (as expected).
  • Now press the "switch 2" button, then "switch 3".
  • When you press "switch 2" 3 again, is still displayed (???).
+4
source share
2 answers

toggle can take logical

$(selector).toggle(false);

http://api.jquery.com/toggle/

.toggle (showOrHide)

showOrHideA Boolean indicating whether to show or hide items.

UPDATE

You can achieve the desired functionality by creating a simple hidden css class call toggleClass() instead of using toggle() . toggle() seems to completely skip its own functionality if this element is not displayed.

http://jsfiddle.net/hunter/GufAW/3/

 $("#toggle-1").click(function() { $("#1").toggleClass("hidden"); }); $("#toggle-2").click(function() { $("#2").toggleClass("hidden"); }); $("#toggle-3").click(function() { $("#3").toggleClass("hidden"); });
+7
source

Try switching the css display property directly:

http://jsfiddle.net/GufAW/5/

 $("#toggle-1").click(function() { $("#1").css("display", ($("#1").css("display")==="none") ? "block" : "none"); }); $("#toggle-2").click(function() { $("#2").css("display", ($("#2").css("display")==="none") ? "block" : "none"); }); $("#toggle-3").click(function() { $("#3").css("display", ($("#3").css("display")==="none") ? "block" : "none"); });
+1
source

More articles:


All Articles