HTML <details> element

The <details> element creates a built-in disclosure box. It gives the reader a small visible heading that can be opened to reveal more information, and closed again when that information is no longer needed.

This is useful when the page contains supporting information, examples, warnings, answer sections, extra settings, or explanations that not every reader needs immediately. The information is present in the document, but it does not have to take up space all the time.

The visible label is supplied by a <summary> element placed as the first child of the <details> element. The rest of the contents become the hidden or revealed part. Without a <summary>, the browser supplies its own default label, but authors should provide a descriptive summary.

The boolean open attribute reflects whether the extra content is currently visible. Including it in the source starts the disclosure open; opening and closing the disclosure then adds and removes the attribute. Its presence is what matters: open="false" still means open. Omit it to start closed.

The name attribute can place several <details> elements into the same exclusive group. In that arrangement, opening one member closes the others. This can be useful for compact accordion-like panels, but it should be used carefully because some readers want to compare several open sections at once.

The <details> element should not be used just because something can be hidden. It has a particular meaning: the reader is choosing whether to reveal extra detail. It is not a tab system, a menu, a modal window, or a replacement for ordinary page structure.

The example groups two disclosures with the same non-empty name. Opening one closes the other. At most one member of the group should have open in the source, and a disclosure must not be nested inside another member of its own group. Omit name when readers should be able to keep both sections open.

Attributes: open, name, GLOBALS.

Typical layout:
<details name="pf-demo-help" open>
  <summary>What is included?</summary>
  <p>The reference includes explanations and examples.</p>
</details>
<details name="pf-demo-help">
  <summary>Can I try the examples?</summary>
  <p>Use the controls shown beside the sample markup.</p>
</details>

Visual representation: