The <details> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	A disclosure widget for additional information or controls
Categories	Flow content, Interactive content, Palpable content
Context	Where flow content is expected
Content model	One summary element followed by flow content
Content attributes	Global attributes, name, and open
DOM interface	HTMLDetailsElement, including the open IDL attribute

Disclosure and summary selection

The first summary element child is the summary for the details element. If there is no summary child, the user agent may provide its own legend, such as “Details”. The rest of the element's contents represent the additional information or controls.

<details>
  <summary>Check the implementation conditions</summary>
  <p>This is the additional information or control area.</p>
</details>

The summary content model is phrasing content, optionally intermixed with heading content. For a useful closed-state label, keep the text specific enough to predict what will be revealed.

open state and activation

open is a boolean content attribute. When present, the summary and additional contents are shown; when absent, only the summary is shown. Activating the summary causes the user agent to set or remove the parent details element's open attribute.

const details = document.querySelector('details');

details.open;            // Boolean reflection of the open attribute
details.toggleAttribute('open');

details.addEventListener('toggle', (event) => {
  console.log(event.oldState, event.newState);
});

Changes to open queue a toggle event. When the state changes repeatedly in quick succession, the notification task is coalesced, so an event is not necessarily fired for every intermediate state. Attribute changes, current rendering, and event timing should be analyzed separately.

Exclusive groups with name

Details elements in the same tree with the same non-empty name value belong to the same details name group. Opening one removes the open attribute from another open member. Initial markup must not contain more than one open member of the same group.

If the purpose is to compare multiple sections at once, an exclusive group may be the wrong information design. The convenience of an accordion should be weighed against the cost of repeatedly reopening content.

Content model and usage boundary

Structure	What to verify
First summary	Acts as the summary or legend for the disclosure
Flow content after summary	Additional information or controls revealed when open
No open	Only the summary is shown; the disclosure is closed
Equal name	Same-tree, non-empty values form an exclusive group

details is for disclosure widgets. Do not replace tab widgets, menu widgets, footnotes, or dialogs with details merely because their visual presentation might look similar.

DOM Interface

HTMLDetailsElement.open reflects the presence of the open attribute as a boolean. When reading the specification state, separate the boolean state from the attribute's string value.

const details = document.querySelector('#settings');
const summary = details.querySelector(':scope > summary');

details.open;
details.hasAttribute('open');
summary.textContent;

Fact / Evidence

Normative claims about the element, summary selection, state changes, and exclusive groups are separated from browser and accessibility observations in the Implementation Evidence section below.

Evidence

1. HTML Standard: The details element — meaning, categories, content model, open, name groups, toggle notification, and DOM interface
2. HTML Standard: The summary element — summary selection, content model, and activation behavior
3. HTML Accessibility API Mappings — entry point for roles, names, and expanded-state mappings
4. Web Platform Tests: the-details-element — related tests for details, summary, open, and exclusive name groups

Implementation Evidence

Browser implementation, WPT, and accessibility observations are recorded separately from normative claims. No dedicated fixture has been executed for this new topic, so unverified items are not marked as reviewed.

Dedicated fixture: details-v1 is a proposed identifier for a follow-up fixture covering initial open, summary activation, IDL state, toggle, and exclusivity within a shared name group. The fixture file and execution results are not registered yet.

Native disclosure indicators, keyboard interaction, rendering, and accessibility-tree exposure may depend on the user agent, OS, and state. A single-environment observation will not be registered as universal browser behavior.

Coverage / Open Issues

• CoveredMeaning, categories, context, content model, content attributes, and DOM interface
• CoveredSummary selection, boolean open state, toggle notification, and the exclusive name-group model
• OpenCross-browser comparison of summary activation, open reflection, toggle events, and name groups
• OpenDisclosure-marker rendering, closed-content rendering, dynamic insertion/movement, and repeated toggles
• OpenIndividual WPT results, HTML-AAM mappings, accessibility-tree observations, and assistive-technology differences

This is initial coverage. It records the normative scope without claiming identical disclosure UI, event timing, accessibility API results across browsers, or completion of the entire details element review.

Related surface

For a beginner-friendly explanation of disclosure sections, summary, open, and name, see the details element page in Yugien. For the semantic and interaction boundary with dialogs, see the dialog element. For command activation, see the button element; for the scripting boundary, see the script element.