Сворачивание блоков с запоминанием

Сворачивание блоков с запоминанием

02012-05-26843220Денис Абдуллин

Блок сворачивается и разворачивается с помощью скрипта. Ну, а чтобы это выглядело анимировано, используется JQuery. В заголовке уже написано, что это сворачивание блоков с запоминанием. Cookies в помощь. Сейчас редко у кого они отключены. Блогодаря Cookies браузер запомнит специальное значение, а при обновлении страницы, повторном заходе, скрипт обработает данные Cookies и скроет блок, если это было сделано пользователем ранее. Использование скрипта позволит сэкономить место на сайте, это также будет удобно пользователю. Можно заключить рекламу в такой блок, а можно сделать блок с каким-либо напоминанием.

Пример

Свернуть
Нажмите на заголовок блока
Нажав на так называемую «шапку» блока, все его содержимое свернется. Обновите браузер, и блок останется свернутым. Если этого не произошло, значит в вашем браузере отключены Cookies.


Подключение JQuery (между <head> и </head>)

<script type="text/javascript" src="http://yraaa.ru/test/53/jquery.js"></script>


Скрипт работы с Cookies (между <head> и </head>)

<script type="text/javascript" src="http://yraaa.ru/images/cookies.js"></script>


Код HTML

<div class="sl1">
<div class="sl2" id="block1"><div class="sl3">Свернуть</div>Нажмите на 
заголовок блока</div>
<div class="sl4">Нажав на так называемую «шапку» блока, все его содержимое
свернется. Обновите браузер, и блок останется свернутым. Если этого не произошло, 
значит в вашем браузере отключены Cookies.</div>
</div>


Код CSS

<style type="text/css">
.sl1 {border:1px solid #D4D4D4}
.sl2 {padding:12px 20px 12px 20px;background:#EAEAEA;border-top:1px solid #FFFFFF;
border-bottom:1px solid #D4D4D4;color:#414141;font-weight:bold;cursor:pointer}
.sl3 {float:right;color:#18A0F7}
.sl4 {padding:20px;background:#FFFFFF;color:#656565}
</style>


Код Javascript

<script type="text/javascript">
$('#block1').click(function() {
if($(this).children('.sl3').html()=='Свернуть') {
setCookie('block1', '1', 10, '/');$(this).children('.sl3').html('Развернуть');
$(this).parent().children('.sl4').slideToggle(200)} else {
setCookie('block1', '0', 10, '/');$(this).children('.sl3').html('Свернуть');
$(this).parent().children('.sl4').slideToggle(200)}
})

block1 = getCookie('block1')
if(block1 == '1') {$('#block1').parent().children('.sl4').hide();
$('#block1').children('.sl3').html('Развернуть')}
</script>

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (20)
Max 2014-02-21 в 12:42 / МатериалСпам
Здравствуйте! А как сделать чтобы изначально блок был свернут? Пробовал через CSS "display:none", тогда блок сворачивается при каждой перезагрузки страницы.
0
Kostja 2013-11-10 в 15:32 / МатериалСпам
Здравствуйте! А подскажите как сделать так что бы вместо слов свернуть / развернуть вставить картинки, которые тоже бы соответственно менялись в зависимости от состояния сплойера! Заранее спасибо!
0
Kostja 2013-11-11 в 18:38 / МатериалСпам
Не получается сделать изначально скрытый блок! display:none вставлял - ничего не получается! Огромная просьба - ПОМОГИТЕ! Напишите полностью код стиля изначально свернутого блока
0
Сергей 2012-10-07 в 20:03 / МатериалСпам
Вопрос решил. Для своих нужд модифицировал спойлер
0
Сергей 2012-10-07 в 18:25 / МатериалСпам
без кукишей не робит
0
Денис Абдуллин 2012-09-30 в 18:18 / МатериалСпам
Georgich, уберите сохранение Cookies вообще тогда
0
Сергей 2012-09-30 в 15:12 / МатериалСпам
Не подскажете, как сделать, чтобы при перезагрузке страницы блок снова разворачивался?
0
Сергей Новиков 2012-08-01 в 19:20 / МатериалСпам
Помогите сделать что бы форумы свернуть можно было)
0
Гость 2012-07-06 в 18:33 / МатериалСпам
ну извините , не думал что все так просто , рылся в Javascript те,думал там можно это сделать ,спасибо за ответ...
0
Гость 2012-07-06 в 16:34 / МатериалСпам
а как сделать что-бы боксы изначально были закрыты ??)
0
Гость 2012-07-06 в 16:49 / МатериалСпам
Задай блоку "display:none" в CSS, и замени тексты "Свернуть" и "Развернуть". Тупой вопрос
0
maca maca 2012-05-29 в 16:24 / МатериалСпам
да, это Ucoz :( форум
0
maca maca 2012-05-29 в 17:01 / МатериалСпам
Можете ли вы помочь мне с инструкциями? :)
0
Вадим 2012-05-29 в 17:09 / МатериалСпам
не силен, простите
0
maca maca 2012-05-29 в 17:17 / МатериалСпам
prog, Хорошо, я буду слушать ваши советы. Мой форум долгий путь, и я подумал, что это сокращает в зависимости от потребностей.
0
maca maca 2012-05-29 в 15:43 / МатериалСпам
Пожалуйста, подробно, до или после $ BODY $ .. или показать мне. Я не программист
0
Вадим 2012-05-29 в 16:13 / МатериалСпам
Так, я не сразу понял, что вы о uCoz. Здесь сложнее будет
0
Вадим 2012-05-29 в 15:31 / МатериалСпам
Заключите в DIV с классом sl4 сам форум, а название топика впишите вместо "Нажмите на
заголовок блока".
0
maca maca 2012-05-29 в 15:35 / МатериалСпам
Спасибо, сразу же попробовать :)
0
maca maca 2012-05-29 в 14:49 / МатериалСпам
как переименовать его работать на форуме?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.