Syntax
<details>
<summary>Click to expand</summary>
<p>Hidden content</p>
</details>Examples
Basic Collapsible Section
A simple expandable/collapsible content block.
<details>
<summary>What is HTML?</summary>
<p>HTML is the standard markup language for creating web pages.</p>
</details>FAQ Accordion
Multiple details elements used to build an FAQ section.
<details>
<summary>Is Codectionary free?</summary>
<p>Yes, all core learning content is free.</p>
</details>
<details>
<summary>Do I need an account?</summary>
<p>An account is needed to save progress and take quizzes.</p>
</details>Open by Default
Using the open attribute so the content starts expanded.
<details open>
<summary>Important Notice</summary>
<p>This section is expanded by default when the page loads.</p>
</details>Attributes
- open (boolean): Shows the details content expanded by default
Best practices
- Use <details>/<summary> for simple show/hide UI instead of building the same thing manually with JavaScript and ARIA attributes
- Always include a <summary> — without one, browsers show a generic default label
- Style the disclosure triangle with the ::marker pseudo-element rather than hiding it and building a custom one, when possible
- Great fit for FAQs, changelogs, and "read more" sections
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
<details>
Desktop
- Chrome
- Supported
From 12 - Firefox
- Supported
From 49 - Safari
- Supported
From 6 - Edge
- Supported
From 79 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 6 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 49 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 12
Firefox
- From 49 · Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
Safari
- From 6
Edge
- From 79
Opera
- From 15
Safari on iOS
- From 6
Chrome for Android
- From 18
Firefox for Android
- From 49 · There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.
Samsung Internet
- From 1.0
<summary>
Desktop
- Chrome
- Supported
From 12 - Firefox
- Supported
From 49 - Safari
- Supported
From 6 - Edge
- Supported
From 79 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 6 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 49 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 12
Firefox
- From 49
Safari
- From 6
Edge
- From 79
Opera
- From 15
Safari on iOS
- From 6
Chrome for Android
- From 18
Firefox for Android
- From 49
Samsung Internet
- From 1.0
<details> open
Desktop
- Chrome
- Supported
From 12 - Firefox
- Supported
From 49 - Safari
- Supported
From 6 - Edge
- Supported
From 79 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 6 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 49 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature
Support history and limitations
Chrome
- From 12
Firefox
- From 49
Safari
- From 6
Edge
- From 79
Opera
- From 15
Safari on iOS
- From 6
Chrome for Android
- From 18
Firefox for Android
- From 49
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.