jQuery collapsing menu
<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>
