HTML - <details>

The HTML Details Element (<details>) is used as a disclosure widget from which the user can retrieve additional information.

Example

HTML

Copy Code

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

Live result

Note: If the live sample above doesn't work for you, see Browser compatibility to determine if your browser supports the feature at all.

Description

The HTML Details Element (<details>) is used as a disclosure widget from which the user can retrieve additional information.

Content categories	Flow content, sectioning root, interactive content, palpable content.
Permitted content	One `<summary>` element followed by flow content.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parent elements	Any element that accepts flow content.
DOM interface	`HTMLDetailsElement`

Feature	Chrome	Firefox (Gecko)	Internet Explorer	MS Edge	Opera	Safari
Basic support	12	49.0 (49.0)^[1]	No support	Under consideration	15	6

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4.0	49.0 (49.0)^[1]	No support	No support	No support

[1] This feature is available since Firefox 47 behind the preference dom.details_element.enabled, defaulting to false, except on Nightly and Aurora versions (bug 1241750). Support for it is enabled by default, i.e. the preference is defaulting to true, since Firefox 49.0 (bug 1226455).

Specifications

Specification	Status	Comment
WHATWG HTML Living Standard The definition of '<details>' in that specification.	Living Standard
HTML5.1 The definition of '<details>' in that specification.	Working Draft	Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/details

Element HTML HTML interactive elements Reference Web