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

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

26.05.2012606420

Блок сворачивается и разворачивается с помощью скрипта. Ну, а чтобы это выглядело анимировано, используется 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>



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