HTML тег <details>

В теге <details> содержатся дополнительные детали, которые пользователь по желанию может раскрыть и посмотреть. По умолчанию содержимое тега не показывается. Для того, чтобы показать содержимое, необходимо применить атрибут open.

Тег <summary> устанавливает видимый заголовок, при нажатии на который будет открываться/закрываться дополнительная информация. Если заголовка нет, то по умолчанию браузер будет показывать заголовок “Подробнее”.

Синтаксис

Тег <details> парный, содержимое пишется между открывающим (<details>) и закрывающим (</details>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <details>
              <summary>Нажмите для просмотра деталей</summary>
              <p>Подробная информация здесь.</p>
        </details>
   </body>
</html>

Результат

Атрибут

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

Тег <details> поддерживает глобальные атрибуты и атрибуты событий.

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

12+ 49+ 6+ 15+




Похожие статьи