Jquery hiding all descendents of a ul tag...showing child elements as tree menu...

Question

I want to hide all the descendents of the "ul" for my tree menu when the page loads up, then as each "main" "li" link is clicked display the direct child, and if the direct child has children (grandchild), when the the "Child" is clicked I want it to show the "grandchild" elements. should be simple, but some how I screwed things up and when i click on the main "li" (Heading 1) it displays all of the descendents (Including the "Sub page A - 1"), instead of just the direct children ("Sub Page A"). Which I think means the children, grandchildren, etc. were never hidden to begin with with the .hide(). What I really want to happen is to hide all the descendents (except the main top-level headings) and as I walk down the tree display the children as needed. Any tips on how to make this work?

Here's the HTML:

<ul id="nav">
<li>Heading 1
    <ul>
        <li>Sub page A
            <ul>
                <li>Sub page A - 1</li>
                <li>Sub page A - 3</li>
                <li>Sub page A - 2</li>
            </ul>
        </li>
        <li>Sub page B</li>
        <li>Sub page C</li>
    </ul>
</li>
<li>Heading 2
    <ul>
        <li>Sub page D</li>
        <li>Sub page E</li>
        <li>Sub page F</li>
    </ul>
</li>
<li>Heading 3
    <ul>
        <li>Sub page G</li>
        <li>Sub page H</li>
        <li>Sub page I</li>
    </ul>
</li>

Here's my Jquery:

$(function(){
$('#nav ul').hide(); //Supposed to Hide all <ul> tags for all descendents, but doesn't work                             
    $('#nav>li').mouseover(function(){ $(this).addClass("a_hand") }); //Add the class that displays the hand                    
    $('#nav>li').toggle(function() {
        $(this).find('ul').slideDown(200);
    }, function() {
        $(this).find('ul').slideUp(200);
    });//END TOGGLE
});//END MAIN FUNCTION

thanks.

Answer 1

You could do this:

$(function(){
  $("#nav>li ul").hide();
  $('#nav>li').click(function() {
    $(this).children('ul').slideToggle(200); //Hides if shown, shows if hidden
  }).mouseover(function(){ $(this).addClass("a_hand") }); //Hand!
});

This will exclude direct children from the initial hide.