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';
}