Сворачивание блоков с запоминанием
  • 536 просмотров
  • 0 комментариев
  • 14.10.2015 в 03:14
  • ILNUROFF
Сворачивание блоков с запоминанием
Доброго времени суток! Представляю Вашему вниманию сворачивающийся и разворачивающийся блок, с запоминанием на Cookies. Ну, а чтобы блок выглядел анимировано, используется JQuery. Благодаря Cookies браузер запомнит специальное значение, а при обновлении страницы, повторном заходе, скрипт обработает данные Cookies и скроет блок, если это было сделано пользователем ранее. Блок очень легок в установке и не займет много времени.

Установка:

Подключение JQuery и Cookies между и :
Код
<script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/bloks/cookies.js"></script>
  <script type="text/javascript" src="http://webmaster-ucoz.ru/ucoz/1/1/bloks/jquery.js"></script>


Код 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>


HTML код вставляете где хотите видеть блок:
Код
<div class="sl1">
  <div class="sl2" id="block1"><div class="sl3">Свернуть</div>Название блока</div>
  <div class="sl4" style="text-align:justify;">
  Ваш текст...
  </div>
  </div>

Случайный материал
Скрываем квадратные скобки на ...
Скрипт давно имеется в публичном доступе, но является актуальнейшим для uCoz...
Информационный шаблон uCozBook
Информационный шаблон uCozBook от htmlCOPY.RU. Шаблон для тематики uCoz. На ...
Одностраничный шаблон WOT тема...
По просьбе одного пользователя выкладываю для Вас очередной шаблон, на этот ...
Комментарии к материалу
Популярные материалы
Жалоба на пользователя для uCoz
630 просмотров
0 комментариев
Страница ошибки 404 в стиле flat для uCoz
748 просмотров
0 комментариев
Шаблон ВКонтакте для uCoz v2
1053 просмотра
0 комментариев
Игровой шаблон gamepolis.ru
885 просмотров
0 комментариев
Рекламное объявление
Комментарии
При копировании материала, автора и источник указывать обязательно.
Шаблон YOU-PS для uCoz
Проверка комментариев
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0