jquery selector problem in hierarchical expanding/collapsing tree

Question

I'm trying to build a screen that will be a hierarchical list of bookmarks, grouped into categories. The categories can be expanded/contracted to show or hide the bookmarks for that category. Right now I'm just working on the UI and using jquery for the first time (and loving it).

The methodology I'm using is sorta like accordion but more than one section can be opened at the same time, and there can be multiple levels deep (accordion only supports one level). For each category, there's a div with an image of a folder in it that will show or hide the next element in the DOM, which would be the collection of bookmarks (usually a <ul>). eg:

<div class="categoryLine" id="d4">
    <img class="folder"....>
    Fourth Menu Item
</div>
<ul id="u4">
    <li id="l41">

I select the element to close using $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); where the div around the image the user clicks on has a class of categoryLine, and the thing to show/hide is the element following that div.

The problem is in the most complex (deepest hierarchy) part, some things are being hidden that shouldn't be, and reappearing for unknown reasons.

You can see a "working" example here. I've given the relevant tags IDs and put in a debugging alert to display the ID of the element clicked on and the elements to be opened and closed (view source to see this).

1. Click on the folder for "Fourth Menu Item" to unhide that category. You should see sub 1, sub 2, and sub 3 appear.
2. Click on the folder for "Fourth Menu Item sub 1". You should see sub 1 expand, but sub 2 completely disappears, including the category line. This is the mystery I'm trying to solve. Clicking on sub 1 correctly says "Toggling 'u411' from category 'd41'" but when the <ul> u411 disappears, so does all of sub 2 disappears. Likewise, if I click on the folder to expand sub2, sub3 disappears.

I am open to implementing this in a completely different way (again, this is my first jquery experiment). I would also be willing to look at solutions where only one category could be open at a time, as long as it still supported a hierarchy instead of one deep like accordion.

Thanks in advance.

Answer 1

jQuery describes parentsUntil() as:

Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.

The important part to note there is that you're not selecting .categoryLine. It seems as though you want to be including it though. Should work if you use closest() instead.

$(this).closest('.categoryLine').next().toggle(transitionSpeed); 

As a side note for future reference. ('categoryLine') is not a selector. Typically, you need to include the ., # or element type, ie div. There are more advanced methods though. You may want to read up on jQuery selectors.