Спойлер html и js

Спойлер html — это простой и действенный метод, скрыть информации, которая интересна не каждому читателю статьи.
Когда пишешь статью для сайта, часто приходится вставлять много технических текстов, которые могут быть не интересны большей части пользователей сайта. Чтобы скрыть этот текст, нам понадобится спойлер html.

Спойлер — это такой контейнер, который скрывает материал до нажатия на ссылку. В нем можно спрятать любой материал, а заинтересованный пользователь всегда его увидит.

Для начала создадим разметку html спойлера

<div class="wrap">
<a class="opening" href="javscript://"><strong>Чтобы увидеть содержимое, нажмите тут</strong></a>
<div class="sp">не очень интересный текст с подробными объяснениями =)</div>
</div>

Ссылка будет волшебной кнопкой открытия, после нее идет контейнер для материала, который необходимо спрятать.
Хочу заметить, что скрипт, который будет дальше в статье, позволяет использовать множество спойлеров в одной статье.

Для множественных спойлеров, вставьте этот код необходимое количество раз.

Стили для спойлера

.sp{display:none; padding:3px 5px;}
.wrap {width:80%; margin:0 auto; margin-top:2em;}

Скрипт спойлера добавляется либо в head секцию сайта, либо перед закрывающим тегом body

<script type="text/javascript">
$(document).ready(function(){
$('.opening').click(function(){
$(this).parent().children('div.sp').toggle('normal');
return false;
});
});
</script>

На забудьте подключить js библиотеку, если она у вас еще не подключена.
Пример работы спойлеров можно посмотреть тут.

Поделиться в социальных сетях
Поделиться ВКонтакте Поделиться ВКонтакте
Поделиться в Facebook Поделиться в Facebook
Добавить в Twitter Добавить в Twitter