{{HTMLRef}}
Summary
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 {{HTMLElement("summary")}} element followed by flow content. |
Tag omission | {{no_tag_omission}} |
Permitted parent elements | Any element that accepts flow content. |
DOM interface | {{domxref("HTMLDetailsElement")}} |
Attributes
This element includes the global attributes.
- {{htmlattrdef("open")}}
- This Boolean attribute indicates whether the details will be shown to the user on page load. Default is
false
and so details will be hidden.
Example
<details> <summary>Some details</summary> <p>More info about the details.</p> </details>
Live result
{{EmbedLiveSample("Example")}}
Note: If the live sample above doesn't work for you, see {{anch("Browser compatibility")}} to determine if your browser supports the feature at all.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}} | {{Spec2('HTML5.1')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 12 | In Nightly and Aurora (DevTools) only[1] | {{CompatNo}} | 15 | 6 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.0 | In Nightly and Aurora only[1] | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
[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 also
- {{HTMLElement("summary")}}