jQuery: How to hide all HTML elements which have a value greater than a certain value for a given tag

Question

I display elements in a hierarchy, clicking one displays the next set of elements in the hirearchy. Each element has a tag called "level" which has some value which is 1-.... (whatever the number of levels is for that branch of the tree).

When an element is clicked I want the next elements to be displayed, but if an element is clicked and it's subelements have already been displayed I want to hide all subelements.

More formally: when an element with level = x is clicked if no elements with level > x are displayed then display all elements such that level = x+1 but if some elements with level > x are displayed then hide all elements where level > x

How would I create a jQuery selector that captures this.

Answer 1

Instead of worrying about "level" attributes, why not just toggle visibility of all child elements of a certain type? Example:

$(document).ready(function() {
  $(".treeNode").click(function() {
   $(this).children(".treeNode").toggle();
  });
});

I'm not sure of your architecture, but this would also keep the nodes in a different branch with the same "level" attribute from being toggled.