<details>

HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации.

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details> является <summary>, содержимое элемента <summary> используется в качестве метки для виджета раскрытия.

 

Content categories Flow content, sectioning root, interactive content, palpable content.
Permitted content One <summary> element followed by flow content.
Tag omission Нет, открывающий и закрывающий теги обязательны.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles None
DOM interface HTMLDetailsElement (en-US)

Атрибуты

Элемент поддерживает только глобальные атрибуты.

open
Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.

Пример

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

Result

Примечание: Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию. 

Примеры стилизации

Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item  и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker, с помощью которого можно стилизовать маркер. 

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу summary {display: block;}, а для Chrome и Safari's установить ::-webkit-details-marker {display: none;}. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.  

HTML

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

CSS

summary {
  display: block;
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

Result

Specifications

Specification Status Comment
HTML Living Standard
Определение '<details>' в этой спецификации.
Живой стандарт  
HTML 5.1
Определение '<details>' в этой спецификации.
Рекомендация Initial definition

Browser compatibility

BCD tables only load in the browser

See also