26.01.15 
6466 
Спойлер на jQuery с индикацией состояния: при свернутом — значок плюса, при развернутом — значок минуса. Картинки можно поменять на желаемые. Библиотеку jQuery подключать не требуется — все необходимое содержится в самом скрипте. Количество спойлеров на странице не ограничено; вложенность — любая.
Пример использования:
⇥ Между <head></head>:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Спойлер на jQuery с индикацией открытости/закрытости</title>
<link rel="stylesheet" type="text/css" href="spoiler.css"/>
<script type="text/javascript" src="spoiler.js"></script>
⇥ Между <body></body>:
<div style="width:900px;margin:0 auto">
<h1>Спойлер на jQuery с индикацией открытости/закрытости</h1>
<p>Текст страницы</p>
<!--spoiler-wrap-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body-->
<div class="spoiler-body">Текст спойлера 1</div>
<!--/spoiler-body-->
</div>
<!--/spoiler-wrap-->
<p>Текст страницы</p>
<!--spoiler-wrap-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body-->
<div class="spoiler-body">Текст спойлера 2</div>
<!--/spoiler-wrap-->
</div>
<h2 style="text-align:center;padding-top:20px">Вложенность, вариант 1</h2>
<!--spoiler-wrap1-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body1-->
<div class="spoiler-body">Текст спойлера 1
<!--spoiler-wrap2-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body2-->
<div class="spoiler-body">Текст спойлера 2
<!--spoiler-wrap3-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 3</div>
<!--spoiler-body3-->
<div class="spoiler-body">Текст спойлера 3
<!--/spoiler-body3-->
</div>
<!--/spoiler-wrap3-->
</div>
<!--/spoiler-body2-->
</div>
<!--/spoiler-wrap2-->
</div>
<!--/spoiler-body1-->
</div>
<!--/spoiler-wrap1-->
</div>
<h2 style="text-align:center;padding-top:20px">Вложенность, вариант 2</h2>
<!--spoiler-wrap1-->
<div class="spoiler-wrap">
<div class="spoiler-head folded clickable">Спойлер 1</div>
<!--spoiler-body1-->
<div class="spoiler-body">Текст спойлера 1
<div class="spoiler-head folded clickable">Спойлер 2</div>
<!--spoiler-body2-->
<div class="spoiler-body">Текст спойлера 2
<div class="spoiler-head folded clickable">Спойлер 3</div>
<!--spoiler-body3-->
<div class="spoiler-body">Текст спойлера 3
<!--/spoiler-body3-->
</div>
<!--/spoiler-body2-->
</div>
<!--/spoiler-body1-->
</div>
<!--/spoiler-wrap1-->
</div>
</div>
Вид настраивается через css. Скорость сворачивания/разворачивания регулируется в файле spoiler.js:
slow: 1200,
fast: 200
⇥ скорость в миллисекундах; варианты скорости ( fast или slow) указываются в конце скрипта:
$(this).next('div.spoiler-body').slideToggle('slow');
Нет комментариев к этой статье.