SummaryEdit
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 |
AttributesEdit
This element includes the global attributes.
open- This Boolean attribute indicates whether the details will be shown to the user on page load. Default is
falseand so details will be hidden.
ExampleEdit
<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.
SpecificationsEdit
| 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 |
Browser compatibilityEdit
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 12 | In Nightly and Aurora (DevTools) only[1] | No support | 15 | 6 |
[1] Available since Firefox 47, this feature is available behind the preference dom.details_element.enabled, defaulting to false except on Nightly and Aurora versions (bug 1226455 and bug 1241750).
See alsoEdit
Document Tags and Contributors
Tags:
Contributors to this page:
Mardeg,
teoli,
slimsag,
Sebastianz,
Poetro,
Sheppy,
Jeremie,
dhodder,
TheShrew,
Aslam.Sayyed,
vtsatskin,
kscarfone,
ethertank,
tregagnon,
niaher,
medicdude,
AskMP,
McGurk,
ebidel,
timemachine3030,
cers,
fscholz,
hobophobe
Last updated by:
Mardeg,