Элемент <details>

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

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

Синтаксис

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

Атрибуты

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

Пример

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

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

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

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

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

Браузеры

79 12 15 6 49
4.4 49 14 6

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

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

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