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');

Reply via email to