Спойлер: как скрыть часть текста с раскрытием по клику

2 апреля 2020

Советы

Рассмотрим как спрятать часть текста под раскрывающийся спойлер.

В данной статье, мы будем рассказывать как сделать скрытие текста самым простым способом, с помощью тега «details».

Итак, чтобы создать простейший спойлер, вставьте вот такой HTML код:

<details>
  <p>Содержание спойлера</p>
</details>

Результат:

Чтобы правильно разместить тег в текстовом редакторе, его необходимо переключить на "Источник":

Найдите тот отрывок текста, который необходимо сделать скрытым:

Разместите открывающий и закрывающий теги «details» перед и после текста, который должен быть скрытым:

Сохраните страницу.

Полученный результат должен выглядеть так:

Обращаем ваше внимание, заголовок «Подробнее» выставляется по умолчанию. Его можно сменить при помощи тега для заголовка «summary»:

<details>
<summary>Какой то заголовок</summary>
  <p>Содержание спойлера</p>
</details>

Результат:

В текстовом редакторе, кроме тега «details» перед и после скрываемого текста, перед самим текстом, добавьте строку с наименованием скрывающей ссылки, вот так:

Мы рассмотрели основные моменты для создания спойлеров в тексте в текстовом редакторе. Вариантов того, что можно сделать со спойлером много, его можно оформить, донастроить и т.д., но в рамках данной статьи мы это рассматривать не будем.