<details>¶

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

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

Интерактивные элементы

details
dialog
summary

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

Can I Use details? Data on support for the details feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

<details> and <summary> polyfill

Синтаксис¶

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

Закрывающий тег обязателен.

Атрибуты¶

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

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

Описание и примеры¶

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

Ссылки¶

Тег <details> ^{MDN (рус.)}