Выдвиньте строку меню при нажатии

Question

Я пытаюсь, чтобы строка меню (.top-bar) сверху выдвигалась, когда вы щелкаете стрелку (#hide), поэтому стрелку также нужно будет сдвинуть вверх. Кроме того, стрелка должна будет переключаться (от стрелки вверх до стрелки вниз). Вот что я безуспешно пытался:

$(document).ready(function(){
$("#hide").click(function(){
    $(".top-bar").animate({'top': '-=100px'}, 1000);
    $("#hide").animate({'top': '-=100px'}, 1000);
    $(".close").switchClass('close', 'open', [1000]);
},
function(){
    $(".top-bar").animate({'top': '+=100px'}, 1000);
    $("#hide").animate({'top': '+=100px'}, 1000);
    $(".open").switchClass('open', 'close', [1000]);
});
 });

Answer 1

У меня есть JS Fiddle, который должен вам помочь. Посмотрите на это, и если у вас есть какие-либо вопросы, прокомментируйте этот пост, и я отвечу. Первый столбец не имеет дочерних элементов, поэтому слайд отсутствует. Используйте столбцы 2 и 3.

http://jsfiddle.net/GvGoldmedal/Vqkvu/