Информационный ресурс для пользователей сайтов
созданных на системе управления сайтом TSAdmin

 

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

2 апреля 2020

Советы

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

 

Пример спойлера, который будем рассматривать (для раскрытия - кликните):

 

Содержание спойлера, текст который необходимо скрыть по умолчанию, и показать при раскрытии.

 

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

 

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

 

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

 

Результат:

 

Содержание спойлера

 

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

 

 

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

 

 

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

 

 

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

 

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

 

 

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

 

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

 

Результат:

 

Какой то заголовок

Содержание спойлера

 

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

 

 

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

 


19 просмотров этой страницы
На сайте тсадмин.рф мы не собираем и не храним никакую информацию без вашего согласия.
Cookie используются для сбора статистики и информации технического характера и хранятся на вашем устройстве. Скрыть
Наверх страницы