show/hide UL LI problem

show/hide UL LI problem

Im trying to do a simple show hide UL/LI nested list, and i have the following code.
 
  1. $(document).ready(function() { $('#nav>li>ul').hide();  $('#nav>li').click(function(event){
      var $target = $(event.target);  
      if ($('#nav ul:animated').size() == 0) {
       $heading = $(this);                         
       $expandedSiblings = $heading.siblings().find('ul:visible');           
       
        if ($expandedSiblings.size() > 0) {               
         $expandedSiblings.slideUp(300, function(){                   
          $heading.find('ul').slideDown(300);               
         });          
        }else{
           
          $heading.find('ul').slideToggle(300);
         
        }
              
      }
     });
      


















 
      here is my HTML
      <ul id="nav">
    <li>Heading 1
        <ul>
            <li>Sub page A</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>
</ul>





















 
The problem is clicking on the Heading 1, 2, 3  will show the corresponding just fine BUT, clicking on any of the Sub page X LI's under the sub UL  will make the UL slide back up.  Bubbling is occuring, but i dont know how to stop it or where to put the stopPropagation() or preventDefault()  or what else to do to prevent this from happening.
 
Any help is appreciated
 
-Matthew