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.
It's because you need to hide() before you slidedown again
$('.box').not(boxItem).slideUp(function(){
$('.box'+boxItem).hide().slideDown();
});