Question

I have a table where each row shows data for nested areas. When I say nested I don’t mean in the HTML, but in how the areas are related to each other. Multiple Countries which contain multiple Regions, which in turn contain multiple sub-regions (LA – Local Authority). Since there are so many LA rows, they are are hidden by default.

I would like these rows to behave like a Windows folder view, where clicking on a Region will show/hide it’s LA rows. Clicking on a Country name will show/hide all it’s Regions and their LAs. Whatever you’ve previously shown/hidden in other Countries will not be affected.

I have this working at the Region level via a .nextUntil method. What I can’t work out how to fix is that the same method on the Country level does not work, as it hides the Region as expected, but it shows the hidden LAs, as it’s just using a toogle.

Any ideas on how to make clicking on the Country name hide the Regions and their LAs, regardless of whether the LA row is shown or hidden? And upon click again it would be nice to show the previous states of those LAs, but not necessary. All closed is fine.

Demo here: http://fluent-interaction.co.uk/temp/table/tabletest.html

My jQuery:

$(document).ready(function() {
$(".rowLA").hide();
$(".rowCountry th p").addClass("toggleClose");
$(".rowCountry th p").click(function() {
    $(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});
$(".rowRegion th p").click(function() {
    $(this).closest(".rowRegion").nextUntil(".rowRegion, .rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});

});

Answer 1

try adding

$(this).closest(".rowCountry").nextUntil(".rowCountry",".rowLA").hide();

after this line :

$(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();

which will hide all LAs within that country.

i am wondering why you have used closest() in all statements…!