coderef

<details>Baseline · Widely available

The &#x3C;details> element is a disclosure widget which can be expanded to reveal additional content. When closed, only the nested &#x3C;summary> element is visible.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–11Not supported
12+Supportedsince Jun 7, 2011
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–48Not supported
49+Supportedsince Sep 20, 2016
Current: 157
Safari
1–5.1Not supported
6+Supportedsince Jul 25, 2012
Current: 27
MobileChrome Android
18+Supportedsince Jun 27, 2012
Current: 155
Firefox Android
4–48Not supported
49+Supportedsince Sep 20, 2016
Current: 157
Safari iOS
1–5Not supported
6+Supportedsince Sep 10, 2012
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: HTMLDetailsElement.

Feature detection

JS · check before using
const el = document.createElement("details");
if (!(el instanceof HTMLUnknownElement)) {
  // <details> is supported
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (8). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
HTMLDetailsElement107949618496
HTMLDetailsElement.open107949618496
HTMLElement.toggle_event36794910.1364910.3
HTMLElement.toggle_event.details_elements36794910.1364910.3
details127949618496
details.open127949618496
summary127949618496
summary.display_list_item898949✕8949✕