$(function(){
    $('#menu>li>ul').hide();
    $('#menu>li').click(function(){
        // check that the menu is not currently animated
        if ($('#menu ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(100, function(){
                    $heading.find('ul').slideDown(200);
                });
            }
            else {
                $heading.find('ul').slideDown(200);
            }
        }
    });
});
