Данный скрипт является небольшим обновлением ранее опубликованного нами скрипта в темеСпойлер с плавным открытием. Данный код в сравнении с предыдущим стал немного компактнее и надежнее (меньше тэгов, следовательно, меньше вероятности ошибиться).


Скрипт все также поддерживает плавное появление и плавное скрытие содержимого под спойлером. Для реализации плавного появления и скрытия содержимого спойлера Вам потребуется подключить на сайте библиотеку jQuery следующим образом:

JavaScript код:
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Для наглядной демонстрации работы предлагаемого нами скрипта, обратите внимание на пару спойлеров, находящихся чуть ниже:



Для получения на своем сайте точно таких же спойлеров, как в примере выше, Вам необходимо будет добавить на свой сайт JavaScript код, который будет отвечать за плавное открытие и скрытие содержимого спойлеров:

JavaScript код:
<script type="text/javascript">
$(
document).ready(function(){
 $(
'.spoiler_links').click(function(){
  $(
this).next('.spoiler_body').toggle('normal');
  return 
false;
 });
});
</script>

Далее, в том месте Вашего сайта, где Вы планируете разместить спойлеры, необходимо использовать такой код:

HTML код:
<div class="spoiler_links blue">Спойлер №1 (кликните для открытия/закрытия)</div>
<
div class="spoiler_body">
 
Текст под спойлером<br>
 
имеет класс spoiler_body.<br>
 
Для придания стиля данному тексту<br>
 
просто добавьте еще один класс.
</
div>

<
div class="spoiler_links green">Спойлер №2 (кликните для открытия/закрытия)</div>
<
div class="spoiler_body">
 
А это уже текст второго спойлера!<br>
 
Данный спойлер также позволяет скрывать<br>
 
излишнее на сайте!
</
div>

Как видите, для каждого заголовка спойлера мы добавили дополнительный стиль, отвечающий за цвет заголовка.


Для того чтобы при первоначальной загрузке странички, все спойлеры были закрыты (скрыто их содержимое) и курсор мышки изменялся при наведении на заголовки спойлеров, необходимо в шапку сайта между тегами <head> и </head> добавить стили для спойлеров:

HTML код:
<style type="text/css">
 .
spoiler_body display:nonefont-style:italic; }
 .
spoiler_links cursor:pointerfont-weight:boldtext-decoration:underline; }
 .
blue color:#000099; }
 
.green color:#009900; }
</style>

Как Вы могли заметить, для каждого отдельного заголовка спойлера (и его содержимого тоже) можно легко добавить дополнительный стиль, в котором Вы можете придать спойлеры индивидуальное оформление. Мы не стали сильно менять оформление заголовков спойлеров, а просто задали им разные цвета.


При необходимости, как и в предыдущей версии спойлера, можно добавить кнопки "Закрыть все" и "Открыть все" для открытия/закрытия всех спойлеров на страничке. Для этого добавьте себе на сайт вот такой код:

HTML код:
<input type="button" value="Закрыть все" onclick=$('.spoiler_body').hide('normal')>
<
input type="button" value="Открыть все" onclick=$('.spoiler_body').show('normal')>

Если Вам необходимо, чтобы одновременно мог быть открыт только один спойлер на страничке, а другие при этом сами закрывались, то замените выше приведенный JavaScript код на такой:

JavaScript код:
<script type="text/javascript">
$(
document).ready(function(){
 $(
'.spoiler_links').click(function(){
    if ($(
this).next('.spoiler_body').css("display")=="none") {
    $(
'.spoiler_body').hide('normal');
    $(
this).next('.spoiler_body').toggle('normal');
 }
 else $(
'.spoiler_body').hide('normal');
 return 
false;
 });
});
</script>

Все. Теперь Вы можете делать у себя на сайте сколько угодно спойлеров и добавлять им свои собственные стили.