Тег details создает спойлер на HTML5, то есть используется для информации, которую можно скрыть или показать по желанию пользователя.

По умолчанию содержимое тега скрыто, для его показа по требованию пользователя следует добавить тег summary, который указывает заголовок для тега details. Этот заголовок всегда виден на странице (даже если содержимое details находится в свернутом состоянии) и по нему можно щелкать для разворачивания скрытого текста или сворачивания.

Так же для показа скрытого содержимого можно использовать атрибут open тега details (например, для показа содержимого details с помощью JavaScript).

Пользоваться так: <details open> или так <details open="open">.

Примеры

Пример

В данном примере вы можете наблюдать работу тега details (смотреть в браузерах семейства webkit):

<details><summary>Нажми на меня</summary> Скрытый текст!</details>

Результат выполнения кода:

Нажми на меня Скрытый текст!