<details>

The HTML <details> element 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 parents	Any element that accepts flow content.
Permitted ARIA roles	None
DOM interface	HTMLDetailsElement

Attributes

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 false and so details will be hidden.

Example

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

Live result

Example with styling

Following the more recent spec, Firefox makes the summary element display: list-item and the marker can be styled the same way list items can be styled. Following an older spec, Chrome and Safari have a custom ::-webkit-details-marker pseudo element which can be styled.

For cross browser compatible styling hide Firefox's marker by setting summary { display: block } and Chrome and Safari's marker by setting ::-webkit-details-marker {display: none;}. Styling can then be applied in a way appropriate to the necessary styles. The example below uses CSS generated content to add the marker back.

HTML Content

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

CSS Content

summary {
 display: block;
}

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

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

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

Result

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.	Recommendation	Initial definition

Browser compatibility

[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).

See also

• <summary>