<details>

Элемент <details> (от англ. details — подробности, данные) используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open.

Исходно содержимое <details> скрыто, вместо него выводится текст «Подробнее», щелчок по которому прячет или показывает содержимое элемента.

Синтаксис

<details>Текст</details>

Атрибуты

open
Показывает информацию внутри элемента.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>details</title> </head> <body> <details> <summary>Спойлер</summary> <p>Убийца — дворецкий!</p> </details> </body> </html>

Результат данного примера показан на рис. 1.

Отображение информации с помощью details

Рис. 1. Отображение информации с помощью <details>

Спецификация

Спецификация Статус
WHATWG HTML Living Standard Живой стандарт
HTML5.1 Рекомендация

Браузеры

12 15 6 49
4 49 36 6.1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также