Question

I have a simple accordion-style menu which opens/closes its children with a help of jQuery: jsFiddle.

If I click on menu items everything works fine – children of selected items are displayed, while all other unnecessary children items hide. However, I’d like to be able to open menu tree based on some variable passed (id).

So, in this jsFiddle I created manual links (on right side) which should show corresponding item in menu (expand all parents) and hide all others. I managed to toggle only first-level children when clicked on manual links, but when I click on let’s say 4th-level link (cat 11 in my example), nothing happens. What I’d like to do is to expand all parents of selected item and collapse all other which are not in selected child’s the tree path.

Thanks for helping.

Answer 1

I think this jsFiddle does what you want.

I haven’t tested with any more levels than your original fiddle had, but I think all of the parent, sibling, and “cousin” elements are accounted for and toggled appropriately depending on what the user clicks.