Question

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.

$(".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>

Answer 1

You can delay changes by assigning your code to an anonymous function that runs once the initial change has taken place, something like –

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

I’m not sure from your description if the above code will do the trick, but I thought the technique might help.

EDIT

Having looked at your HTML I think the code below should fix the problem (http://jsfiddle.net/WftqT/1/) –

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