Перейти к содержанию

<details>

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

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

Демо

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

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

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

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

Синтаксис

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

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

Атрибуты

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

open

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>details</title>
    </head>
    <body>
        <details>
            <summary>Спойлер</summary>
            <p>Убийца — дворецкий!</p>
        </details>
    </body>
</html>

Комментарии