HTML тег <details>

Поддержка браузерами

Описание

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

Тег <details> может использоваться для создания интерактивных виджетов, которые пользователь может открывать и закрывать. Внутри тега можно разместить какой-либо контент.

По умолчанию содержимое тега <details> не отображается, для изменения статуса применяется атрибут open.

Атрибуты

open:

Указывает, что содержимое тега изначально должно быть показано в развернутом виде. Значения для логического атрибута open можно задавать следующими способами:

<details open>
<details open="open">
<details open="">

Пример »

Тег <details> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

details {
    display: block;
}  

Пример

<details open="open">
  <summary>Тут что-то есть.</summary>
  <p> - Здесь могло быть, что-нибудь интересное.</p>
</details>

Результат данного примера в окне браузера: