Question

What I want is fairly simple:

I have a container with a background. Inside the container are triggers and hidden boxes like so:

<div id="container">

<span id="box-1">Open 1</span> <span id="box-2">Open 2</span> <span id="box-3">Open 3</span> <span id="box-4">Open 4</span> <span id="box-5">Open 5</span> 

<div class="box box-1">Hi! I'm Box 1</div>
<div class="box box-2">Hi! I'm Box 2</div>
<div class="box box-3">Hi! I'm Box 3</div>
<div class="box box-4">Hi! I'm Box 4</div>
<div class="box box-5">Hi! I'm Box 5</div>

</div>

Once a trigger is clicked a target box slides down. If a box is open already it slides up and the new target box slides down. I have this working on a different part of the site but it’s a bit more complex to share in jsfiddle. The simple version I can’t get to work correctly is here:

jsFiddle: slideUp and slideDown issue

It seems that the slideDown function is starting before the slideUp completes. I’ve moved the slideDown outside the slideUp callback and I get the same reaction. I’ve worked with duration and delay but it still has the same issues.

—– EDIT —–

I should note that my goals is for the container to collapse completely before expanding again.

Answer 1

It’s because you need to hide() before you slidedown again

$('.box').not(boxItem).slideUp(function(){
    $('.box'+boxItem).hide().slideDown();
});

http://jsfiddle.net/dYMx8/