jquery menu slide down
<p>I have a vertical menu with sub categories.  When a main category is clicked the sub-menu slides down and the previously opened sub-menu up slides up.  I would like it if a user clicks on the same main-menu item a second time that it slides up the associated sub-menu.  With this code it opens and closes it almost simultaneously when the same main menu item is clicked a second time.</p>

<pre><code>$(".main-cat").click(function() {
    $(".active-sub").hide('slow');
    $(".sub" , $(this).parent()).toggle('slow');    
    $(".sub" , $(this).parent()).addClass('active-sub');
});

&lt;div id="sidebar"&gt;
&lt;ul&gt;
    &lt;li class="main"&gt;
        &lt;div class="main-cat 1"&gt;Real Estate&lt;/div&gt;
        &lt;ul class="sub" id="sub_real_estate"&gt;
            &lt;li&gt;&lt;div class="sub-cat 2"&gt;Consulting Services&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div class="sub-cat 3"&gt;Investment&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div class="sub-cat 4"&gt;Property Management&lt;/div&gt;&lt;/li&gt;
            &lt;li&gt;&lt;div class="sub-cat 5"&gt; Development&lt;/div&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li class="main"&gt;
        &lt;div class="main-cat 6"&gt;Investment&lt;/div&gt;
        &lt;ul class="sub" id="sub_investment"&gt;
                &lt;li&gt;&lt;div class="sub-cat 7"&gt;Philosophy&lt;/div&gt;&lt;/li&gt;
                &lt;li&gt;&lt;div class="sub-cat 8"&gt;Criteria&lt;/div&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
