Простой и красивый спойлер (jQuery)

Спойлер (от англ. spoiler — «прерыватель потока») — это такая удобная штучка для скрытия больших объёмов текста или другого контента на сайте. Например, на вашем сайте может быть опубликован фильм. Вы можете сделать к нему краткое описание и скриншоты, но не всем будет интересна эта информация — её лучше скрыть в спойлер. Или список песен опубликованного музыкального альбома можно спрятать в спойлер... Ну, вы поняли. В этой статье я приведу кусок кода для реализации спойлера без плагинов на любом движке. А для WP будет дополнительная примочка.

Чтобы ваш объёмный текст или другой материал (давайте, я дальше буду его называть «скрытый контент») уютно поместился в спойлер, его надо будет оформить таким макаром:

Ваша статья..
<div class="spoiler-wrap">
<div class="spoiler-head">Скрытый текст (нажмите, чтобы развернуть)</div>
<div class="spoiler-body">Это скрытый контент</div>
</div>
Продолжение вашей статьи.

«Скрытый текст (нажмите, чтобы развернуть)» — это заголовок спойлера, в закрытом состоянии будет виден только он. Конечно, такой HTML каждый раз писать влом. К тому же, это ещё только начало, а не весь код. Подождите немного — будет веселей.

Нам было бы куда удобней пользоваться вот таким кодом:

[spoiler] Это скрытый контент [/spoiler]

И это возможно. Если у вас не WordPress, то, надеюсь, вы хорошо знаете свой движок и основы программирования, иначе интеграция моего кода вызовет у вас затруднения.

А счастливые пользователи WP могут смело дописывать в файл темы function.php следующий код (надеюсь, вы учтёте мои рекомендации по редактированию файлов WP):

function pavluha_net_spoiler ($atts, $content) {
	if (!isset($atts['title'])) $sp_title = 'Скрытый текст (нажмите, чтобы развернуть)';
	else $sp_title = $atts['title'];
	return '
<div class="spoiler-wrap"><div class="spoiler-head">'.$sp_title.'</div>
<div class="spoiler-body">'.$content.'</div></div>
';
}
add_shortcode('spoiler', 'pavluha_net_spoiler');

Вот теперь в ваших постах можно использовать шоткод [spoiler]. Если у вас не WP, но вы хотите использовать шоткод, вам поможет вот этот PHP-код:

$content = str_replace ('[spoiler]', '<div class="spoiler-wrap">
<div class="spoiler-head">Скрытый текст (нажмите, чтобы развернуть)</div>
<div class="spoiler-body">', $content);
$content = str_replace ('[/spoiler]', '</div></div>', $content);

Но, догадывайтесь сами, что такое $content и куда это вставлять, ведь я не знаю, что у вас за движок.

И это ещё не всё. В шаблон отображения страниц вашего сайта (для WP подойдёт, например, header.php) необходимо вставить этот JS код:

<script>(function($){
var SBobj = '';
$('.spoiler-body').hide();
$('.spoiler-head').click(function(){
	$(this).toggleClass('unfolded');
	SBobj = $(this).next();
	if ($(SBobj).css('display') == 'none') $(SBobj).show(300); else $(SBobj).hide(300);
	})
})(jQuery);</script>

Это движитель нашего спойлера. Как видите, он для работы требует JS-фреймворк jQuery (в WP он подключается автоматически). Тем не менее, если вы видите сразу скрытый контент, а при клике на заголовок спойлера ничего не происходит, значит, возможно, у вас jQuery не подключена. Тогда спросите у поисковой системы «как подключить jquery» или добавьте перед описанным выше кодом ещё и этот код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

И заключительный штрих — прописываем стили спойлера. Пользователи WP редактируют файл темы style.css, дописывая в него следующие строки:

.spoiler-wrap {
background: #eee;
border: 1px solid #aaa; border-radius: 5px;
margin: 12px 6px;
}
.spoiler-head {
padding: 2px 18px;
cursor: pointer;
background: url('images/spoiler-icon1.png') no-repeat 3px 9px
}
.unfolded { background: url('images/spoiler-icon2.png') no-repeat 3px 9px }
.spoiler-body {
margin: 5px;
display: none;
}

Разумеется, вы можете оформить на свой вкус. Смотрим, что у нас получилось (рабочий пример):