jquery menu slide down -

i have vertical menu sub categories. when main category clicked sub-menu slides down , opened sub-menu slides up. if user clicks on same main-menu item second time slides associated sub-menu. code opens , closes simultaneously when same main menu item clicked second time.

$(".main-cat").click(function() {     $(".active-sub").hide('slow');     $(".sub" , $(this).parent()).toggle('slow');         $(".sub" , $(this).parent()).addclass('active-sub'); });  <div id="sidebar"> <ul>     <li class="main">         <div class="main-cat 1">real estate</div>         <ul class="sub" id="sub_real_estate">             <li><div class="sub-cat 2">consulting services</div></li>             <li><div class="sub-cat 3">investment</div></li>             <li><div class="sub-cat 4">property management</div></li>             <li><div class="sub-cat 5"> development</div></li>         </ul>     </li>     <li class="main">         <div class="main-cat 6">investment</div>         <ul class="sub" id="sub_investment">                 <li><div class="sub-cat 7">philosophy</div></li>                 <li><div class="sub-cat 8">criteria</div></li>           </ul>         </li>     </ul> </div> 

you can delay changes assigning code anonymous function runs once initial change has taken place, -

$(".main-cat").click(function() {     $(".active-sub").hide('slow', function () {       $(".sub" , $(this).parent()).toggle('slow');           $(".sub" , $(this).parent()).addclass('active-sub');     }); }); 

i'm not sure description if above code trick, thought technique might help.

edit

having looked @ html think code below should fix problem (http://jsfiddle.net/wftqt/1/) -

$(".main-cat").click(function() {     //hide or show clicked menu     $(".sub" , $(this).parent()).toggle('slow');     //if clicked menu visible close other open menus     if (!$(".sub" , $(this).parent()).is(':hidden')) $(".maincat").not(this).parents('li').find('ul:[class="sub"]').hide('slow'); });