<div> - слайдер

[Viktor.Poberezhniy]

Помогите пожалуйста решить задачу!

Есть <div> с параметрами (width:1280px; height:400px внутри которого находится контент, и стрелка указывающая вниз.
По нажатию на стрелку этот <div> должен плавно расшириться вниз ещё на (300px и при повторном нажатии на стрелку он должен обратно вернуться к своим исходным параметрам.

вот тут http://jsfiddle.net/84waH/ я пробовал делать, но зашел в тупик и теперь не понимаю что я не так делаю..... помогите пожалуйста кто может решить эту задачу.... заранее спасибо.

P/S: не судите меня строго ..... я начинающий разработчик.....

http://jsfiddle.net/84waH/1/

[Vlasenko Fedor]

Подключи jQuery в примере и выставь правильно при каком событии должен скрипт срабатывать
И все заработает

[Viktor.Poberezhniy]

Подключи jQuery в примере и выставь правильно при каком событии должен скрипт срабатывать
И все заработает

Извиняюсь за ошибку.
Вот это уже с подключенной библиотекой

http://jsfiddle.net/84waH/1/

Вопрос состоит в том, как сделать что бы:
1) сам блок с контентом раздвигался а не поверх накладывался другой блок.
2) и контент который идёт уже после этого блока должен сдвигаться вниз ровно на то количество пикселей на которое блок увеличивается по высоте.

[Vlasenko Fedor]

$(document).ready(function() {
    var open = false;
    $(":image").click(function() {
        $('#game').animate({height: (open ? "-": "+") +"=300"}, 1000);
        open = !open;
   });
});

[Viktor.Poberezhniy]

Poznakomlus Спасибо огромное, это то что мне нужно было.....

[Viktor.Poberezhniy]

ещё один маленький вопрос.
кнопка не опускается вместе с блоком..... (((((

http://jsfiddle.net/84waH/3/