Home >Web >HTML reference – elements and attributes >details – disclosure widget

details – disclosure widget

<details><summary>Heading</summary>…</details>

A disclosure widget: only the heading in summary is visible, the rest appears after a click. Mouse and keyboard control, the arrow and announcing the state to screen readers are all handled by the browser – without a single line of JavaScript. Useful for FAQs, details or long lists.

Default display: display: block
End tag: required
Content: one summary as the first child followed by flow content
Where it can be used: anywhere flow content is allowed
DOM interface: HTMLDetailsElement

Attributes

open – the widget is expanded (the browser adds and removes the attribute on click).
name – widgets with the same name form an accordion: opening one closes the others. Chrome since 120, Firefox since 130, Safari since 17.2 (as of October 2026).

Examples

FAQs as an accordion – only one can be open at a time:

<details name="faq" open>
  <summary>How long does sourdough bread keep?</summary>
  <p>Wrapped in a dish towel, four to five days.</p>
</details>
<details name="faq">
  <summary>Do you also bake gluten-free bread?</summary>
  <p>Yes, on Thursdays and Saturdays.</p>
</details>

result

How long does sourdough bread keep?

Wrapped in a dish towel, four to five days.

Do you also bake gluten-free bread?

Yes, on Thursdays and Saturdays.

The state of the widget in a script – the toggle event fires after every opening and closing:

<details id="filters">
  <summary>Filters</summary>
  …
</details>
<script>
  document.getElementById('filters').addEventListener('toggle', function (e) {
    localStorage.setItem('filters-open', e.target.open ? '1' : '0');
  });
</script>

Accessibility

summary behaves like a button: it can be reached with the Tab key and opened with Enter or Space. Screen readers announce whether the widget is expanded.

Things to watch out for

Find in page (Ctrl+F) finds the text of a collapsed widget and opens it – Chrome since 97, Firefox since 148 and Safari since 26.2 (as of October 2026). Older browsers do not find text in a collapsed widget.
summary { list-style: none; } hides the arrow (marker), in Safari also summary::-webkit-details-marker { display: none; }.
A smooth expanding animation is possible in CSS via the ::details-content pseudo-element (Chrome since 131, Firefox since 143, Safari since 18.4).
Do not put links or buttons in summary – clicking them would open the widget at the same time.

Browser support

Baseline – widely available: in all major browsers since January 2020, considered widely available since July 2022. Since version: Chrome 12, Firefox 49, Safari 6. As of October 2026 (MDN browser-compat-data).