How can i make a div stay below two other divs that are laternating with jqueryui slide?

Question

I am facing the following problem:

I have a container div that contains three other divs. The first two are hidden (display:none) the third contains something: text, images or whatever. When a user clicks a button i want the first of the three divs to slide down with jQuery and the third to move below the one that just appeared. When the button is clicked again the first div should slide up and the second div should appear in its place by sliding up too. This should be reversed the next time the button is clicked ad infinitum ...

I have implemented what i thought would do the job, but alas i was wrong. The two divs move exactly as they should, but the third one stays put below the other two.

My HTML is :

<div style="position: relative">
<div id="topMenuDivision" style="border: 1px solid; display: none; position:absolute">
    here is Div 1
</div>
<div id="bottomMenuDivision" style="border: 1px solid; display: none; position:absolute">
    here is Div 2
</div>
<div style="position: relative">
    I want this to be at the bottom, bellow the other two regardless which (if any) is shown
</div>

My javascript is :

    window.currentlyOpen = "none";
function togleTheDivs()
{
    if (window.currentlyOpen=='none')
    {
        $('#topMenuDivision').show('slide',{direction: 'up'},750,callBack);
        currentlyOpen = 'top';
    }else if (window.currentlyOpen=='top')
    {
        $('#topMenuDivision').hide('slide',{direction: 'up'},750,callBack);
        $('#bottomMenuDivision').show('slide',{direction: 'down'},750,callBack);
        currentlyOpen = 'bottom';
    }else if (window.currentlyOpen=='bottom')
    {
        $('#topMenuDivision').show('slide',{direction: 'up'},750,callBack);
        $('#bottomMenuDivision').hide('slide',{direction: 'down'},750,callBack);
        currentlyOpen = 'top';
    }
}

function callBack()
{

}

Here is a jsfiddle with my code:

http://jsfiddle.net/QTW3u/9/

Could be positioning? wrong use of slide? I am at a loss here ... Any ideas?

Answer 1

Your code is good, the only problem is the absolute positioning of the first two divs. If you remove them, it works.

But then, you might find that the bottom one jumps during the time the first two divs are visible (during the animation). The easiest way to avoid that, would be so animated the second one only when the first one to move is done.

Something like this: http://jsfiddle.net/QTW3u/16/

if (window.currentlyOpen=='none')
{
    $('#topMenuDivision').show('slide',{direction: 'up'},750);
    currentlyOpen = 'top';
}else if (window.currentlyOpen=='top')
{
    $('#topMenuDivision').hide('slide',{direction: 'up'},750,function() {
        $('#bottomMenuDivision').show('slide',{direction: 'down'},750);
    });
    currentlyOpen = 'bottom';
}else if (window.currentlyOpen=='bottom')
{
    $('#bottomMenuDivision').hide('slide',{direction: 'up'},750, function() {
        $('#topMenuDivision').show('slide',{direction: 'down'},750);
    });
    currentlyOpen = 'top';
}