How to make accordion menu close and open sequentially rather than simultaneously?
<p>I've got a jQuery plug-in to generate accordion-like menus. However, my <code>slideUp()</code> and <code>slideDown()</code> functions seem to be happening simultaneously.</p>

<p>Ideally, I would like all expanded sub-menus to slide up, and then the selected menu item's sub-menu slide down once that's completed. My code is as follows:</p>

<pre><code>jQuery.fn.accordionMenu = function() {
    return this.each(function() {
        $('#menu ul').hide(); // hide all unordered lists
        $('#menu li.selected ul').show(); // drop down selected item's sub-menu
        $('#menu li a').click(function() {
            var speed = 'fast';
            var checkElement = $(this).next();
            if (checkElement.is('ul')) {
                if (!checkElement.is(':visible')) {
                    $('#menu ul:visible').slideUp('slow').parent().removeClass('open');
                    checkElement.slideDown('slow').parent().addClass('open');
                }
                return false;
            }
        });
    });
};
</code></pre>

<p>Thanks in advance.</p>

<p>EDIT: Solved with the following:</p>

<pre><code>jQuery.fn.accordionMenu = function() {
    return this.each(function() {
        $('#menu ul').hide(); // hide all unordered lists
        $('#menu li.selected ul').show(); // drop down selected item's sub-menu
        $('#menu li a').click(function() {
            var speed = 'fast';
            var checkElement = $(this).next();
            if (checkElement.is('ul')) {
                if (!checkElement.is(':visible')) {
                    $('#menu ul:visible').slideUp(speed, function() {
                        checkElement.slideDown(speed).parent().addClass('open');
                    }).parent().removeClass('open');
                }
                return false;
            }
        });
    });
};
</code></pre>
