HTML <details> and <summary>

<details> is the native disclosure widget. The 2024 name attribute lets a group of <details> behave as an exclusive accordion. Replaces a long history of ad-hoc collapsible-panel JavaScript.

Normative spec: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
Last verified: 2026-04-27
Byline: Editorial team

What `<details>` is

<details> is the native HTML disclosure widget. A <summary> child provides the activator; the rest of the content shows or hides depending on the open state.

<details>
  <summary>Why is the sky blue?</summary>
  <p>Rayleigh scattering: short-wavelength light scatters more
  strongly off the atmosphere than long-wavelength light. The sky
  appears blue because we see scattered short-wavelength light from
  the whole sky.</p>
</details>

The element exposes:

A boolean open content attribute (<details open>).
An open IDL property and a toggle event.
A name attribute (HTML 2024) that groups multiple <details> into an exclusive set — opening one closes the others, replacing most authors’ need for a custom accordion.

Semantics

The default ARIA role of <details> (when it has a <summary> first child) is mapped to platform-specific disclosure semantics:

macOS — disclosure-triangle plus group.
Windows UIA — ControlType.Group with ExpandCollapsePattern.
AT-SPI — ROLE_PUSH_BUTTON with expanded state.

The <summary> element exposes an implicit button role when it is the first child of a <details> element. This is documented in HTML-AAM 1.0 §4.5.

The `name` attribute (2024 addition)

Before 2024, an exclusive accordion required a JavaScript handler that closed siblings on open. The HTML Standard added the name attribute, which makes a group of <details> mutually exclusive:

<details name="faq">
  <summary>How do I install?</summary>
  <p>...</p>
</details>
<details name="faq">
  <summary>How do I uninstall?</summary>
  <p>...</p>
</details>

Opening either closes the other. The name attribute reached interop in 2024 across Chromium (Blink), WebKit, and Gecko per wpt.fyi/html/semantics/interactive-elements/the-details-element.

Styling

The default presentation includes a triangle marker in <summary>. To replace it, use ::-webkit-details-marker (WebKit) and the modern ::marker (interop 2022). To remove it entirely:

summary {
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

The standard display value of <summary> is list-item, so the triangle is the list-item marker. To customise, override ::marker or set display: block on <summary> and provide your own icon.

The 2023 interpolate-size and transition of block-size properties make a CSS-only animated open/close possible:

details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}

The ::details-content pseudo-element is a 2024 addition; it lets authors target the disclosed body without an extra wrapper. Pass-rate about 80% across the three engines as of 2024.

Accessibility

<details> and <summary> provide:

Keyboard activation by Enter or Space on the <summary>.
An aria-expanded value reflecting the open state, no manual bookkeeping required.
Focus management on the <summary> element.
The body is announced as part of the disclosure region after the user activates <summary>.

For the name attribute exclusive group, AT announces the new expanded state on the focused <details> and the new collapsed state on the previously open one — assuming the AT supports the 2024 update. NVDA 2024.1 and VoiceOver in Safari 17 handle it correctly; older AT may announce only the active toggle.

Common pitfalls

<summary> not first child. The implicit button role disappears if any element precedes the <summary>. AT then announces the group as a generic region.
Empty <summary>. No accessible name; AT announces “button” with no label. Always provide visible text or an aria-label.
Custom <summary> with <button> inside. Two interactive controls in the same focus stop. Pick one.
Hiding the marker without compensating styling. Sighted users lose the visual cue that the element is interactive. Provide a hover or focus style.
Closing siblings via JavaScript when the name attribute would do it. Remove the script; let the platform handle exclusivity.

Find-in-page integration

Chromium-based browsers since 2023 expand collapsed <details> elements when find-in-page (Ctrl/Cmd+F) finds a hit inside them. WebKit and Gecko are pursuing parity; the spec text is in WHATWG issue #6549. This is one of the reasons to prefer <details> over a hand-rolled accordion for FAQs and similar long-content disclosures.

What <details> is