Простой HTML+JS (jQuery) спойлер

Простой код спойлерера для удобного использования в любом месте шаблона сайта.

HTML:

<a href="#" class="spoiler-trigger"><span>Развернуть спойлер</span></a>
<div class="spoiler-block">Скрытый контент спойлера</div>

Если будет выводиться несколько спойлеров подряд, то каждый из блоков необходимо оборачивать в какой-нибудь тег: div, li и т.п.

Можно сделать чтобы блок по умолчанию был открыт:

<a href="#" class="spoiler-trigger active"><span>Развернуть спойлер</span></a>
<div class="spoiler-block" style="display: block;">Скрытый контент спойлера</div>

CSS:

.spoiler-trigger{
	color: #0b70db;
	text-decoration: none;
	padding-left: 15px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8hiJ0TaQrwuY2kDNINwnmcKLchO5LuHWEwgkAlO5FBwhFaI8AAAAASUVORK5CYII=) no-repeat 0 50%;
}
.spoiler-trigger.active{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8DRRhcxvIGTSyjqDvCIUTAEcINQcERZkIAAAAAElFTkSuQmCC);
}
.spoiler-trigger>span{
	border-bottom: 1px dashed #0b70db;
	padding:0 3px;
}
.spoiler-trigger:hover>span{
	border-bottom-style: solid;
}
.spoiler-block{
	display: none;
}

JS:

$(document).on('click','.spoiler-trigger',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.spoiler-block').first().slideToggle(300);})

Примеры:

Спойлер 1

Открытый контент первого спойлера

Спойлер вложенный

Текст скрытого вложенного спойлера

Спойлер 2

Скрытый контент второго спойлера

HTML код примеров

<div>
	<a href="#" class="spoiler-trigger active"><span>Спойлер 1</span></a>
	<div class="spoiler-block" style="display:block;">Открытый контент первого спойлера
<div>
	<a href="#" class="spoiler-trigger active"><span>Спойлер вложенный</span></a>
	<div class="spoiler-block">Текст <span style="color:#c00;">скрытого</span> вложенного спойлера</div>
</div></div>
</div>
<div>
	<a href="#" class="spoiler-trigger"><span>Спойлер 2</span></a>
	<div class="spoiler-block">Скрытый контент второго спойлера
		<img src="http://sandev.pro/uploads/posts/2016-11/1479545446_screenshot_2.png" alt="" />
	</div>
</div>
<div><a href="#" class="spoiler-trigger"><span>HTML код примеров</span></a>
	<div class="spoiler-block"></div>
</div>

С уважением,
Олег Александрович a.k.a. Sander

Комментарии: (5)

SKYNET74 Посетитель 8 октября 2017 15:43 #
А как насчёт вложенных спойлеров как на рутрекере например?
0

Ответить Цитировать
Бодя Гость 20 января 2019 13:59 #
когда внутри <span></span>
то спойлер не работает
0

Ответить Цитировать
1. Sander Администратор 20 января 2019 14:02 #
  
  Проверил, работает. Видно в примере.
  Текст <span style="color:#c00;">скрытого</span> вложенного спойлера
  
  0
  
  Ответить Цитировать
Олег Гость 26 июля 2019 10:54 #
Но это не чистый js это jQuery. и что б код работал, нужно еще эту библиотеку подключать
0

Ответить Цитировать
rem Гость 10 сентября 2021 19:33 #
Чтобы работало, нужно заменить
$(this).parent().find('.spoiler-block').first().slideToggle(300);
на
$(this).next('.spoiler-block').first().slideToggle(300);
0

Ответить Цитировать