ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Сворачивающиеся блоки на Cookies для uCoz

Сворачивающиеся блоки на Cookies для uCoz

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

Установка:

Первое что нужно сделать, это подключить JQuery и Cookies, который должны стоять между head сайта.

Код
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Fyrkes/cookies.js"></script>  
<script type="text/javascript" src="http://zornet.ru/Ajaxoskrip/Fyrkes/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 вставляете перед /body

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


Вся установка, источник материала yraaa.ru портал.
24 Сентября 2015 Просмотров: 1590 Комментариев: (7)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 7
Canon
Canon 24 Сентября 2015 02:021
0
Скрипт не сложный и иногда нужный, но не люблю много кодов раставлять, хотя все в одном месте, но кроме, того где будет стоять.
Kosten
Kosten 24 Сентября 2015 02:362
0
Так то отличный скрипт, чтоб к примеру вывести информацию, думаю можно поставить видео, но не исключаю. Устанавливается в рамках сайта, а главное, вы открываете и закрываете, смотрел на демонстраций.
FeStemBer
FeStemBer 24 Сентября 2015 06:143
0
Но это смотря для кого легко, по мозговал и сделал, круто смотрится. Хотя мне не нужно, но интересно было поставить и поставил, и что то умею, сам удивился.
Сопрано
Сопрано 24 Сентября 2015 06:194
0
Отличный код, хотя у меня немного другой стоит, но думаю на этот перекину, нужно DEMO для этого делать. Смотрю на многих материалах стоит, а вот где для меня нужно нет его.
Kosten
Kosten 24 Сентября 2015 06:215
0
Ну и отлично что понравилось и пригодилось. А что про демонстрацию, то делал на несложные скрипты, это где идет код и стиль на его, основном меню для сайта.
First-1
First-1 24 Сентября 2015 23:116
0
Полезная штука. Видел ещё очень не плохие сворачивающиеся блоки в контейнере, мне они очень понравились По возможности завтра рипну и выложу, или дам дам Kosten"у пусть выложит, а то не сильно писать умею)
Kosten
Kosten 24 Сентября 2015 23:567
0
First, ты то грамотно рипаешь, все до крошки сказать можно. Просто опиши главное, я допишу потом.
Войдите:
avatar