Войти
» » » Простой HTML+JS спойлер

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

0 170 admin 04-04-2018 20:50 DLE хаки и модули

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

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(dаta:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVQoU2PkLrj9n4EAYAQp+jpBlRGXOpA8hiJ0TaQrwuY2kDNINwnmcKLchO5LuHWEwgkAlO5FBwhFaI8AAAAASUVORK5CYII=) no-repeat 0 50%;
}
.spoiler-trigger.active{
background-image: url(dаta: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').slideToggle(300);})

Вот и всё)))

Источник