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

‘;
>
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) вставим строчку:

Путь до файла «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 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%
100%
>
details[open] summary::before content: «- «;
>

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

$(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();
>);
>);

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.

.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 вставляем код скрипта:

За визуальное оформление будут отвечать следующие строчки кода, которые необходимо внести в файл 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

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