Question

I have an application where data sets can be filtered at various levels, and–for performance reasons–it would be nice to be able to toggle the respective display of nested divs independently. The issue arises in that toggle will change the display property back to its original state on a hidden child, but it will not change it to none if one of its ancestors is already hidden.

To replicate: in this JSFiddle,

1. Click the “toggle 3” button, and then the “toggle 2” button.
2. Clicking the “toggle 3” button and then the “toggle 2”, you will find 3 restored (as expected).
3. Now click the “toggle 2” button, then the “toggle 3”.
4. On clicking “toggle 2” again, 3 is still visible (???).

Answer 1

toggle can take a boolean

$(selector).toggle(false);

---

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

.toggle( showOrHide )

showOrHideA Boolean indicating whether to show or hide the elements.

---

UPDATE

You can achieve the functionality you want by creating a simple hidden css class calling toggleClass() rather than using toggle(). toggle() seems to skip its own functionality entirely if the element in question is not visible.

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");
});