Простой и красивый спойлер (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;
}

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

Скрытый контент (нажмите, чтобы развернуть)
Это был скрытый контент. Теперь он открыт. Воспользовавшись случаем, хочу трейлер культового мультфильма:
Запись опубликована в рубрике Web-мастеринг с метками , , . Короткая ссылка для добавления в закладки: Простой и красивый спойлер (jQuery).

5 Responses

  1. Надюша говорит:

    Хорошая штука для сайтов, предлагающих к скачиванию мультимедийный контент и для магазинов. Подробное описание файлов или товаров удобно скрывается спойлером :) Ёжик в тумане — жесть...

  2. Кирилл говорит:

    Удобно, это в код страницы вставлять надо?

    • Pavluha.Net говорит:

      Кирилл, если ты ещё не прокурил, куда это вставлять, то я тебе вообще не рекомендую куда бы то ни было это вставлять. И это только из лучших побуждений. :) Ведь, когда плохо в чём-то разбираешься, лучше не трогать то, что работает. Так что, если ты знаешь, какие последствия будут от вставки того или иного кода в твою страницу, то ты пришёл по адресу

  3. Артем говорит:

    Странно, но на joomla 2.5 скрипт не хочет работать.

    И FireBug ни каких ошибок не выдает.

    • Pavluha.Net говорит:

      Действительно странно. Но, вообще-то, приведённый выше скрипт — кроссплатформенный (не считая куска, касающегося шоткодов в WP). Так что, проблема может быть только во внедрении скрипта. Недавно тоже искал проблему неработающего скрипта (jQuery). Оказалось, что один плагин отключал встроенную библиотеку jQuery и подключал свою, более ранней версии. Так что, ищите и боритесь, найдите и не сдавайтесь. ;)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Иногда ваш комментарий может не отобразиться сразу после публикации - будто пропал. Не волнуйтесь, он не пропадёт и появится потом, после моего одобрения.