Вы вошли как:  Гость
Форум
Это сообщество, объединяющее в себе пользователей, заинтересованных в создании сайтов и разработки дизайнов различной тематики. У нас вы сможете узнать мнения профессионалов по любым вопросам или поделиться своим опытом с неопытными пользователями, найти полезную информацию и просто пообщаться с хорошими людьми.
Присоединяйтесь к нам!

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

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

Установка:
Подключение JQuery и Cookies между и :
Код
<script type="text/javascript" src="/bloks/cookies.js"></script>  
<script type="text/javascript" src="/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>
Комментарии
Статистика