Тег details

Тег details создает спойлер на HTML, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.

По умолчанию содержимое тега скрыто, для его показа по требованию пользователя следует добавить тег summary, который указывает заголовок для тега details. Этот заголовок всегда виден на странице (даже если содержимое details находится в свернутом состоянии) и по нему можно щелкать для разворачивания скрытого текста или сворачивания.

Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).

Пример

Давайте посмотрим, как работает тег details:

<details> <summary>Нажми на меня</summary> Скрытый текст! </details>

: