Как сделать спойлер на сайте

Последнее бновение - 15 января 2023 в 16:22

Чтобы сделать спойлер на сайте, работающем под управлением CMS WordPress, не обязательно устанавливать дополнительный плагин. Достаточно обладать навыком редактирования файлов установленной темы.

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

В Сети я нашёл несколько способов реализации такого функционала. В этой записи приведу несколько примеров.

Начну с варианта, предложенного ImpulsWeb. Потребуется вставить в область контента, где хотим видеть спойлер, html-код, включить в работу скрипт и присвоить стили. Кроме того, следует учитывать, что на веб-ресурсе подключена и правильно работает библиотека JQuery.

Автор предлагает такую вёрстку:

<div class="spoiler-block">
<a href="#" class="spoiler-title">Кликни меня</a>
<div class="spoiler-content">
Читаете этот текст? Ура! Значит, созданный вами спойлер работает!</br>
(Этот текст можно менять по своему усмотрению)
</div>
</div>

Далее, перед закрывающим тегом body вставим код скрипта:

<script>
$(document).ready(function(){
$('.spoiler-title').click(function(){
$(this).parent().children('div.spoiler-content').toggle('fast');
return false;
});
});
</script>

Теперь, чтобы результат работы выглядел привлекательнее, добавим стили в файл style.css:

/**Стили блока с текстом внутри спойлера**/
.spoiler-content{
display:none; /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
border:1px solid #ccc; /**рамка блока контента спойлера**/
margin-top:5px; /**отступ сверху**/
background:#F0F0F0; /**фон блока контента спойлера**/
}
/**Стили блока оборачивающего каждый блок**/
.spoiler-block{
margin-top:10px;
}
/**Стили кнопки спойлера**/
.spoiler-title {
border:1px solid #B9B9B9;
background: #ccc;/**обычный фон для браузеров, которые не поддерживают градиент**/
background:linear-gradient(#CACACA, #E8E8E8);/**градиентный фон**/
padding:10px;/**внутренний отступ**/
text-decoration:none;/**убираем подчёркивание у ссылки**/
color:#000; /**цвет текста ссылки**/
display:block; /**делаем ссылку на всю ширину**/
}

А вот ещё один способ, предложенный в блоге Свободного Вебмастера. Этот метод реализуется с применением шорткода.

Первым делом, необходимо добавить в файл functions.php функцию, которая отвечает за вывод спойлера, а также зарегистрировать шорткод с именем «spoiler». Для этого вставим код:

function simple_spoiler_shortcode($atts, $content) {
if ( ! isset($atts['title']) ) {
$sp_name = 'Спойлер';
} else {
$sp_name = $atts['title'];
}
return '<div class="spoiler-wrap">
<div class="spoiler-head folded">'.$sp_name.'</div>
<div class="spoiler-body">'.$content.'</div>
</div>';
}
add_shortcode( 'spoiler', 'simple_spoiler_shortcode' );

Чтобы скрытый контент раскрывался и снова закрывался при клике, необходима работа jQuery, как и в первом варианте. Включим в работу скрипт. для этого создадим файл spoiler.js с таким содержимым:

jQuery(document).ready(function() {
jQuery('.spoiler-body').hide();
jQuery('.spoiler-head').click(function() {
jQuery(this).toggleClass('folded').toggleClass('unfolded').next().toggle();
});
});

Файл spoiler.js разместить в папке с сайтом. Теперь, чтобы подключить скрипт, перед закрывающим тегом head (файл темы header.php) вставим строчку:

<script src="spoiler.js"></script>

Путь до файла «spoiler.js» указываем в зависимости от места его размещения.

Далее, при помощи CSS настроим внешний вид спойлера, добавив в файл style.css действующей темы такие строчки:

.spoiler-wrap {
border: 1px solid #3b6d3d;
background: #e9ffd0;
}
.spoiler-head {
padding: 10px;
line-height: 1.5;
cursor: pointer;
}
.folded:before {
content: "+";
margin-right: 5px;
}
.unfolded:before {
content: "–";
margin-right: 5px;
}
.spoiler-body {
padding: 10px;
border-top: 1px solid #3b6d3d;
background: #f4fef3;
}

Как теперь показать спойлер на странице? В нужном месте необходимо вставить шорткод:

[spoiler] Здесь содержимое, которое необходимо скрыть [/spoiler]

В данном случае, по умолчанию будет указан заголовок «Спойлер» (смотрите третью строчку функции). Однако, заголовок можно указать любой на своё усмотрение при помощи атрибута title:

[spoiler title="Название спойлера"] Здесь содержимое, которое необходимо скрыть [/spoiler]

А вот третий способ реализации при помощи только html и css. Указываем такой html-код:

<details>
<summary>Тут название спойлера</summary>
Содержимое, которое необходимо скрыть.
</details>

Придаём внешний вид:

details summary {
display: block;
background:#f0f0f0;
padding:10px;/**внутренний отступ**/
cursor: pointer
}
details summary::-webkit-details-marker {
display: none;
}
details summary::before {
content: "+ ";
}
/*плавное раскрытие спойлера*/
details[open] div {
animation: spoiler 1s;
}
@keyframes spoiler {
0% {opacity: 0;}
100% {opacity: 1;}
}
details[open] summary::before {
content: "- ";
}

Ещё интересный спойлер, раскрывающийся при клике на кнопки. Потребуется включение jQuery.

Код HTML:

<nav class="spoilers-menu"><a class="spoiler-link" href="#sp1">Spoiler 1</a><a class="spoiler-link" href="#sp2">Spoiler 2</a><a class="spoiler-link" href="#sp3">Spoiler 3</a></nav>
<div class="spoilers">
<div class="spoiler" id="sp1">
<h2 class="spoiler__title">Spoiler 1</h2> Содержимое №1.
</div>
<div class="spoiler" id="sp2">
<h2 class="spoiler__title">Spoiler 2</h2> Содержимое №2.
</div>
<div class="spoiler" id="sp3">
<h2 class="spoiler__title">Spoiler 3</h2> Содержимое №3.
</div>
</div>

Код JS:

$(function(){
$('.spoiler').hide();
$('.spoiler-link').on('click', function(e) {
var idSpoiler = $(this).attr('href'),
classSelect = 'spoiler-link--active';
$(this).toggleClass(classSelect);
$(idSpoiler).slideToggle(200);
e.preventDefault();
});
});

Код CSS:

body {
font: 16px/1.5em "Segoe UI", Arial, sans-serif;
background: #bfb6a0;
color: #fff;
width: 60%;
margin: 20px auto;
}
.spoiler-link {
display: inline-block;
text-decoration: none;
color: #fff;
background: #b63333;
padding: 10px 25px;
border-radius: 3px;
text-shadow: 0 1px 0 #8c1111;
border-bottom: 1px solid #8c1111;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.spoiler-link:hover {
background: #8c1111;
}
.spoiler-link + .spoiler-link {
margin-left: 5px;
}
.spoiler-link--active {
background: #4f9c3d;
border-color: #2d751c;
text-shadow: 0 1px 0 #2d751c;
}
.spoiler-link--active:hover {
background: #2d751c;
}
.spoiler {
background: #fff;
color: #907c6b;
padding: 25px;
margin-top: 25px;
border-radius: 3px;
border-bottom: 1px solid #999;
}
.spoiler__title {
margin-top: 0;
font-weight: 200;
color: #b63333;
}

Или вот такое решение на html, js и css.

Код HTML:

<div class="spoil">
<div class="sp_top">
<span class="sp_span">Заголовок</span>
<button class="sp_button">Показать</button>
</div>
<div class="sp_text">
Здесь ваше скрытое содержимое
</div>
</div>

Код JS:

<script>
$(document).ready(function () {
$(document).on("click", ".sp_button", function () {
spoyler(this);
});
});
function spoyler(obj) {
var spoil = $(obj).parent().parent(".spoil");
var he = spoil.find(".sp_text").innerHeight() + 60;
if (spoil.height() == 24) {
$(obj).text("Свернуть");
spoil.stop(true).animate({ height: he + "px" }, 200);
} else {
$(obj).text("Развернуть");
spoil.stop(true).animate({ height: 24 + "px" }, 200);
}
}
</script>

.spoil {
position: relative;
overflow: hidden;
background: url(img/nline.png);
border: 1px solid #c3c3c3;
border-left: 6px solid #c3c3c3;
margin: 15px 0 15px 0;
height: 24px;
}
.spoil .sp_text {
margin: 40px 10px 10px 10px;
}
.spoil .sp_top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 25px;
background: rgba(195, 195, 195, 0.1);
border-bottom: 1px solid #c3c3c3;
display: table;
}
.spoil .sp_span {
vertical-align: middle;
display: table-cell;
padding: 0 0 0 20px;
}
.spoil .sp_button {
position: absolute;
right: 2px;
top: 2px;
width: 100px;
height: 20px;
text-align: center;
border: 1px solid #c3c3c3;
background: #fff;
}
.spoil .sp_button:hover {
box-shadow: inset 0 0 3px #ffd800;
}

И ещё один вариант мне понравился в блоге Константина Белана. По сути он не отличается от предыдущих способов. Всё то же самое, отличие только во внешнем оформлении.

План такой. Открываем на редактирование файл footer.php и перед закрывающим тегом body вставляем код скрипта:

<script>
$(".closed").toggleClass("show");
$(".title").click(function(){
$(this).parent().toggleClass("show").children("div.contents").slideToggle("medium");
if ($(this).parent().hasClass("show"))
$(this).children(".title_h3").css("background","rgb(253, 253, 253)");
else $(this).children(".title_h3").css("background","rgb(240, 238, 238)");
});
</script>

За визуальное оформление будут отвечать следующие строчки кода, которые необходимо внести в файл style.css действующей темы:

.spoiler {
overflow: hidden;
margin-bottom: 20px;
margin-top: 20px;
border: 1px solid #dfdfdf;
border-left: 2px solid #09ADAD;
box-shadow: 0 0 9px #dddddd inset;
}
.title_h3 {
cursor:pointer;
font-size: 14px;
background: rgb(240, 238, 238);
margin: 0 -10px 0 -10px;
padding: 10px;
padding-left: 30px;
-moz-box-shadow: 0 0 9px #dddddd inset;
box-shadow: 0 0 9px #dddddd inset;
}
.closed .contents { display:none; }
.closed h3 { background: #bbbbbb; }
.contents { padding: 10px; }

Что касается вёрстки, то в область контента, где планируется скрыть некоторый текст или изображения, вставить такой код:

<div class="spoiler closed">
<div class="title"><div class="title_h3"><strong>Здесь указываем свой заголовок</strong></div></div>
<div class="contents">Здесь содержимое, которое надо прикрыть спойлером</div></div>

Всем WEB!