Widely availableWell suited to progressive disclosure. Use it when content should stay in the DOM but remain collapsed until the user asks for it.
Interactive Widely available

<details>

The <details> element creates a disclosure widget that users can open and close without custom JavaScript. It is a simple fit for FAQs, advanced settings, and supporting context.

InteractiveDisclosureFAQ

Overview

The <details> element creates a disclosure widget that users can open and close without custom JavaScript. It is a simple fit for FAQs, advanced settings, and supporting context.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<details>
12
79
49
6
18
6
HTML attribute
open
12
79
49
6
18
6
display_list_item

`display: list-item`
89
89
49
89
DOM API
HTMLDetailsElement

The HTMLDetailsElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating details elements.
10
79
49
6
18
6
open

The open property of the HTMLDetailsElement interface is a boolean value reflecting the open HTML attribute, indicating whether the details's contents (not counting the summary) is to be shown to the user.
10
79
49
6
18
6
toggle_event

The toggle event of the HTMLElement interface fires on a Popover_API element, dialog element, or details element just after it is shown or hidden.
36
79
49
10.1
36
10.3
toggle_event (details elements)

`toggle` event fires at details elements
36
79
49
10.1
36
10.3
Other
html.elements.summary

The HTML element specifies a summary, caption, or legend for a details element's disclosure box. Clicking the element toggles the state of the parent element open and closed.
12
79
49
6
18
6
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • 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.

Syntax

HTML 
<details>
  <summary>View Details</summary>
  <p>Hidden content goes here.</p>
</details>

<details open>
  <summary>Open by default</summary>
  <p>You can use the `open` attribute to set the initial state to open.</p>
</details>

Live demo

FAQ accordion

JavaScriptnot-main. accordionUI create.HTML edit add only is. with details + summary

PreviewFullscreen

Settings panel

Open attribute in initialperiodstate state to in..formelement and. combinationexample.

PreviewFullscreen

Name Attribute in accordion

same name attribute has details is exclusive to toggle.(1 onlyOpen).

PreviewFullscreen

Use cases

  • FAQ answers

    A question in summary and the answer inside details creates a compact, scannable knowledge block.

  • Advanced settings

    Hide secondary options by default so the main interface stays focused and approachable.

Cautions

  • Do not hide critical instructions inside collapsed content that users must discover before they can complete a task.
  • If several details blocks form an accordion, decide whether multiple panels may stay open at once and keep the behavior consistent.

Accessibility

  • The summary text should describe the hidden content clearly, not use vague labels such as 'More'.
  • Keep heading structure and reading order intact even when content starts collapsed.

Related links

Powered by web-features