Как на jQuery сделать спойлер (раскрывающийся текст)?

Элементарный спойлер на jQuery можно сделать, поместив следующий код в $(document).ready:

// Скроем все элементы, которые должны быть скрыты
$(''.spoiler-body'').hide();
// При клике на элементе с классом spoiler-title
// показываем или скрываем элемент, который идёт за ним
$(''.spoiler-title'').click(function(){
$(this).next().toggle();
});

Пример самый примитивный. После клика по заголовку функция next() возвращает следующий за ним элемент, то есть ‘spoiler-body’. Функция toggle() скрывает его, если он отображён, или показывает, если он скрыт. Вместо toggle() можно написать slideToggle(), чтобы получить анимацию с выезжанием:

$(''.spoiler-body'').hide();
$(''.spoiler-title'').click(function(){
$(this).next().slideToggle();
});

Спойлеров на странице может быть несколько, главное чтобы после элемента с классом ‘spoiler-title’ шёл элемент с классом ‘spoiler-body’.

Учтите, что текст под спойлером с самого начала видим, он прячется непосредственно из скрипта, то есть после загрузки страницы, делается это строчкой $('.spoiler-body').hide(). Это значит, что если у пользователя выключен JavaScript, он увидит текст под всеми спойлерами на странице. Также пользователь может увидеть текст, если страница будет грузится слишком медленно и DOM загрузится только частично. Для того, чтобы всего этого не случилось, назначьте классу в CSS свойство display:none:

.spoiler-body {
display:none;
}

Но тогда при выключенном JavaScript совсем ничего отображаться не будет.

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

<h5 class="spoiler-title closed">Показать текст</h5>
<div class="spoiler-body">Текст<br />который<br />должен<br />скрываться<br />и<br />раскрываться.<br />Его очень<br />много<br />и он<br />выезжает.</div>

.opened {
color:green;
}
.closed {
color:blue;
}

$(''.spoiler-body'').hide();
$(''.spoiler-title'').click(function(){
$(this).toggleClass(''opened'').toggleClass(''closed'').next().slideToggle();
if($(this).hasClass(''opened'')) {
$(this).html(''Скрыть текст'');
}
else {
$(this).html(''Показать текст'');
}
});