Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Сворачивание блока как вконтакте

Сворачивание блока как вконтакте

Наверняка вы видели как в социальной сети вконтакте можно сворачивать и развораивать блоки. Это удобно и практично пользователям вашего сайта. Они могут скрыть блоки с информацией которая им не нужна. Эффект как всегда реализован на jQuery.

Подключаем библиотеку
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>


Создаем кнопки для сворачивания и разворачивания
<input type="button" value="Свернуть" onclick="$('div.container').slideUp('slow');">
<input type="button" value="Развернуть" onclick="$('div.container').slideDown('slow');">
<input type="button" value="Свернуть или Развернуть" onclick="$('div.container').slideToggle('slow');">


Создаем блок с контентом
<div class="container">
Тут находится текст заглушка.

text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text text
</div>


Готово!

Демо: смотреть
Скачать: sliding.zip [73,96 Kb] (cкачиваний: 400)
Опубликовал dimas_ua, 5-09-2010, 00:00 Комментариев: 4
 (голосов: 0)
Пишет smartik, 5 сентября 2010 08:55
  • Сообщений: 0
  • Новостей: 0
а как сделать чтобы контейнер был вначале свернут?
Пишет admin, 6 сентября 2010 02:00
  • Сообщений: 1
  • Новостей: 7
.container {display:none;}
Пишет smartik, 6 сентября 2010 08:27
  • Сообщений: 0
  • Новостей: 0
я прошу прощения, но куда это вставить?

заменил style который в примере на display:none ничего не изменилось =(
Пишет Mexalim, 18 сентября 2010 15:35
  • Сообщений: 0
  • Новостей: 0
А можно объяснить как к этому всему прикрутить куки?
буду очень признателен