problem with jquery dropdown menu

I'm trying to build a jquery dropdown menu, basically I have the left navigation which is drop down and I have a right section as well, I'm trying to make the height of the left navigation always equal to the height of the right part, it works fine on page load, bu开发者_高级运维t when I click on link on the left navigation the products under it will show and the products that were open before will hide, but I get the height of the left navigation as soon as I click on it before the second part is hidden, therefore it's giving me the wrong height, I figured that I have to wait for the click event to finish completely and then calculate height, but I dont know how to do that,

test site to show what I mean

if you click on ladies clothing and then men clothing the height of left navigation wont increase, if you click on men clothing and then ladies clothing the height of the right container gets too big,

jQuery.noConflict();

jQuery(document).ready(function() {
var level2 = jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 > a');

    level2.click(function(e) {
        e.preventDefault();
        var navId = jQuery(this).parent().attr('class').substr(7,9);
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp();
        jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown();

        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
});
});

any help would be appreciated.

You can add a callback function to slideUp(duration, callback) and slideDown() and within that callback you can get the final size of your container.

jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.level2 ul.level2 li.level3 > a').slideUp('slow', onSlideUpDownComplete);
jQuery('.nav-container ul#nav li.level0 ul.level0 li.level1 ul.level1 li.'+navId+' ul.level2 li.level3 > a').slideDown('slow', onSlideUpDownComplete);


function onSlideUpDownComplete()
{
        var navHeight = jQuery('div.page div.nav-container').height();
        var mainContainerHeight = jQuery('div.main-container').height();

        if (navHeight > mainContainerHeight) {
            jQuery('div.main-container').height(navHeight); 
        }else {
            jQuery('div.page div.nav-container').height(mainContainerHeight);
        }
}

Here a link to the Documentation.