title: jQuery collapsing menu
body: <p>I'm trying to make a menu that collapses, markup is below:</p>
  
  <p>Whenever a .cat_menu_header is clicked, the ul below it should expand and all expanded ul's should collapse. So we start with everything collapsed and only the .cat_menu_header elements visible, with max 1 .submenu being expanded at one time.</p>
  
  <pre><code>&lt;ul id='sidebarNav'&gt;
    &lt;li class='cat_menu_header'&gt;&lt;a class='collapsed' href='#'&gt;Link 1
      &lt;ul class='submenu'&gt;
        &lt;li&gt;&lt;a href='#'&gt;text 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#'&gt;text 2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class='cat_menu_header'&gt;&lt;a class='collapsed' href='#'&gt;Link 2
      &lt;ul class='submenu'&gt;
        &lt;li&gt;&lt;a href='#'&gt;text 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#'&gt;text 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The follow js makes each .submenu expand and collapse but I can't figure out how to select all expanded ul's and collapse them. I added the .collapsed class which could be changed to .expanded with toggleClass.</p>
  
  <p>I know I'm close ...</p>
  
  <pre><code>    $(document).ready(function(){   
      //sidebar collapsible menu
      $("#sidebarNav &gt; li &gt; ul").hide();
  
      $("#sidebarNav a.collapsed").click(function() {
          $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("fast");
          return false;
      });
  });
  </code></pre>