Make slideToggle wait until other div's slideUps have finished?

Question

My goal is a specific type of a menu that's divided in four sections that you can open and close by clicking the section headers. Here's what I've so far: http://jsfiddle.net/samuliviitasaari/Ya8P8/9/

This works quite the way I want it to, except for when you already have one menu section open, and then you click another section header. I'd like it to wait until the section closes and only then open the other one; now it's all happening at once, causing some pretty ugly flickering.

My question is, do I have to make the script 'self-aware' (= able to know if a specific section is open or not) or is there a quick way to make the slideToggle automatically wait until the already opened section (if any) has closed. And of course, if there is currently no section open, go straight ahead with no delay?

For now, the core code is pretty crude, trying to close all the other sections just in case, whether they're actually open or not:

$("#one").click(function () {
    $("#toggleone").slideToggle(100);
    $("#toggletwo").slideUp(100);
    $("#togglethree").slideUp(100);
    $("#togglefour").slideUp(100);
});

PS. If you have any other tips on how to make the code more eloquent, I'd be grateful!

Answer 1

Try:

I have added toggle class to #toggleone,toggletwo,togglethree,togglefour divs.

$(".toggle").hide();
$("#one,#two,#three,#four").click(function () {
    var id = $(this).attr("id");
    if ($("#toggle" + id).is(":visible")) {
        $("#toggle" + id).slideToggle();
    } else {
        if ($(".toggle:visible").length > 0) {
            $(".toggle:visible").slideUp(function () {
                $("#toggle" + id).slideToggle(200);
            });
        } else {
            $("#toggle" + id).slideToggle();
        }
    }
});

Updated fiddle here.

Answer 2

use .delay() in the the code to wait for the side to happen

fiddle updated