Archie Goodwin

Если вам нужно вставить какую-то дополнительную информацию прямо в тексте статьи или описания материала и скрыть ее спойлером, то вам пригодится этот скрипт.

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

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

HTML код-конструкция, из которой состоит спойлер (вставлять там где вам необходимо, чтобы был сам спойлер ясное дело между тегами body):

<div>Какой-то очень важный текст 

 <span class="textopen"> больше...</span>

 <span class="textfade">скрываемый текст как 
 дополнительное описание
 и продолжение 

 <span class="textclose">свернуть</span>

 </span>

</div>

PS Переносы строк добавлены исключительно для большей читабельности блочной структуры.

Добавим небольшие стилевые настройки к этой конструкции (CSS стили желательно вставлять между тегами head):

<style>
.textfade {
 display:none;
}
.textclose {
 cursor:pointer;
 color:#056399;
}
.textopen {
 cursor:pointer;
 color:#056399;
}
</style>

И javascript код, который заставляет эту конструкцию работать как нужно (вставляем в самом низу страницы, до закрывающего тега body):

<script type="text/javascript">
$(document).ready(function() {
 $('.textopen').click(function() {
 $(this).slideToggle('slow');
 $(this).parent().children('.textfade').slideToggle('slow');
 })
 $('.textclose').click(function() {
 $(this).parent().parent().children('.textfade').slideToggle('slow');
 $(this).parent().parent().children('.textopen').slideToggle('fast');
 })
});
</script>

Напоминаю, что код написан на jQuery, поэтому чтобы он заработал, необходимо чтобы на странице была подключена библиотека jQuery версии не ниже 1.7.2

Если нужно чтобы спойлер был не с новой строки, а в тексте, прямо посреди абзаца, то в конструкции HTML внешний блок div необходимо заменить на span, и вот что получится:

<span>Какой-то очень важный текст 

 <span class="textopen"> больше...</span>

 <span class="textfade">скрываемый текст как 
 дополнительное описание
 и продолжение 

 <span class="textclose">свернуть</span>

 </span>

</span>