Question

I’m having trouble with a multiple DIV menu system. I have 3 divs for 3 separate displays on the same page. By default the “about” div displays. When you click Contact or Resume, the About div should slide up before either of the other divs slide down. Clicking other menu choices will have the same result.

Here’s the basic layout of the page:

<div id="menutabs">
    <ul>
        <li><a href="#" name="divAbout"><span>About</span></a></li>
        <li><a href="#" name="divContact"><span>Contact</span></a></li>
        <li><a href="#" name="divResume"><span>Résumé</span></a></li>
    </ul>
</div>

And the container divs have IDs that match the link names.

The jQuery:

$("a").click(function () {
    var divname = this.name;
    $("#"+divname).siblings(".contentbox").slideUp("slow", function() {
        $("#"+divname).slideDown("slow");
    });
    return false;
}); 

The problem is that I wrote the code with only 2 divs on the page and it worked perfect. The callback function did not execute until the first div was done sliding up. However, when I added a 3rd div, it no longer waits.

I have commented out multiple divs to confirm that the issue was specifically just having 3 divs on the page, as it didn’t act this way no matter which 2 divs I left uncommented.

Any ideas?

Answer 1

The trouble is that the callback is invoked once for each element.

So if there are 10 .contentbox elements getting the slideUp, you’re firing the slideDown method on `’#’ + divname’ 10 times. This can cause unexpected problems.

To avoid this, you can use a simple variable as a flag.

$("a").click(function () {
    var divname = this.name;
    var has_run = false;
    $("#"+divname).siblings(".contentbox").slideUp("slow", function() {
        if( !has_run ) {
            $("#"+divname).slideDown("slow");
            has_run = true;
        }
    });
    return false;
}); 

Another solution would be to use a setTimeout in place of the callback for slideUp.

$("a").click(function () {
    var divname = this.name;
    $("#"+divname).siblings(".contentbox").slideUp("slow");
    setTimeout(function() {
        $("#"+divname).slideDown("slow");
    }, 600);
    return false;
});