jQuery - вертикальное переключение вверх (т.е. не вниз)

Мне нужно создать переключатель, который будет анимировать вверх, а не вниз, другими словами, в противоположность «нормальному» переключателю. Возможно, проще, чтобы переключатель был перемещен вверх над элементом меню (это меню), чтобы стать видимым, а не скользить вниз, как это делает обычный slideToggle и т. Д. Я почти достиг этого:

var opened = false;
$("#coltab li").click(function(){
    if(opened){
        $(this).children('ul').animate({"top": "+=300px"});
    } else {
        $(this).children('ul').animate({"top": "-=300px"});
    }
    $(this).children('ul').children().slideToggle('slow');
    $(this).children('ul').toggle();
    opened = opened ? false : true;
});

НО если вы "переключаете" элемент, ТОГДА другой элемент, второй элемент (скользит вниз) падает на 300 пикселей НЕ скользит вверх (поднимается) на 300 пикселей. Хорошим примером (ненавижу сайт) того, чего я хочу достичь, является http://market.weogeo.com/#/home и «вкладки» внизу.

Мой HTML-код использует

Item 1

This bit needs to toggle up


Item 2

This bit needs to toggle up


etc ...

на стороне CSS

ul#coltab { position: relative' blah; blah; }

и

ul#coltab  ul { display: none; position: absolute; blah; blah; }

Есть идеи?

Было бы хорошо, если бы каждый «щелчок» закрывал предыдущий переключатель перед открытием «нажатого» переключателя.