Как и обещал в прошлой статье – буду рассказывать про jquery. Сегодня расскажу про эффект сворачивания, разворачивания на jquery. Хорошим примером может быть социалка Вконтакте – в которой можно сворачивать и разворачивать разные боксы, на картинке выше показан развернутый блок “Друзья он-лайн” и справа от него другие свернутые блоки. Для тех кому все равно тяжело могу провести параллель со сворачиванием и разворачиванием рулона обоев, ткани или туалетной бумаги – кому как понятней.

Немного теории

Элемент будет скрыт либо отображен путем изменения только своей высоты.

slideUp(speed,[fn]) – свернет объект за время speed, и после этого вызовет функцию [fn] один раз.

slideDown(speed,[fn]) – развернет объект за время speed, и после этого вызовет функцию [fn] один раз.

slideToggle(speed,[fn]) – свернет или развернет (в зависимости от текущего состояния) объект за время speed, и после этого вызовет функцию [fn] один раз.

speed – может принимать либо строковый параметр: slow, normal, fast, либо значение в миллисекундах

[fn] – не обязательный параметр, можно указывать, а можно и не указывать

Практический пример

Создаем три кнопки: свернуть, развернуть, свернуть или развернуть.

<input onclick="$('div.container').slideUp('slow');" type="button" value="Свернуть" />
<input onclick="$('div.container').slideDown('slow');" type="button" value="Развернуть" />
<input onclick="$('div.container').slideToggle('slow');" type="button" value="Свернуть или Развернуть" />
<div class="container">
Конечно же у качественной книги должна быть соответствующая обложка.
 
Как и сами книги обложки могут быть различными. Для дорогой сувенирной книги подойдет выделанная тисненая кожа, для свадебной книги светлые пастельные тона, детские книжки будут интересно смотреться в ярких обложках. Кроме того, обложку возможно украсить некоторыми декоративными элементами,  например, фотографией напечатанной на холсте или алюминиевой вставке.</div>

Просмотреть пример  свернуть развернуть или скачать исходник.