HTML тег <details>

Элемент <details> (от англ. "details" ‒ «детали») создаёт блок с дополнительной информацией, которую пользователь при желании может раскрыть и посмотреть. По умолчанию содержание элемента скрыто. Внутри данного элемента можно размещать любые HTML элементы.

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

Для определения видимого заголовка дополнительной информации в теге <details> используется элемент <summary>. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.

Синтаксис

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

Закрывающий тег

Обязателен.

Атрибуты

open

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

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <details> со следующими значениями CSS по умолчанию:

details { 
    display: block;
}

Различия между HTML 4.01 и HTML5

Тег <details> был добавлен в HTML5.

Пример использования:

Элемент <details>

<details open>  <!-- Для того, чтобы элемент был видимым изначально, следует добавить атрибут open -->
    <summary>Посмотреть код</summary>
    <pre>исчезающая информация</pre>
    <p>исчезающий текст
</details>

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