I have a nested (many levels) list, each item containing a link which, among other things should cause a child list (if there is one) to display. All child lists are hidden by default.
<div id="section_list"> <ul> <li class="Section" id="one"> <a href="...">...</a> <ul> ... </ul> </li> <li class="Section" id="two"> <a href="...">...</a> <ul> ... </ul> </li> </ul> </div> The section classes are only in the top-level list. The list IDs are only here for explanation. What I need to do is close any section that's already open when a link is clicked--except if the link is in the open section. So, if the list under #one is open, and the user clicks the link under #two, the first list should close before the one under #two opens. There's a bunch of other stuff involved but I pared it down to the essentials. My problem is how to remove the clicked link's section's UL from closing. Otherwise, it closes, then re-opens. This is my latest feeble attempt: $('#section_list a').click(function() { /* clunky! */ var parent_section = $(this).parents('ul').get($(this).parents('ul').size()-2); /* hide all sections except this one */ $('#section_list li.Section ul').not($(parent_section)).hide('slow'); /* show child list if present */ $(this).next('ul').show('slow');