HTML details name groups: open one disclosure at a time

Use it in a concrete workflow

A short equipment checklist has three mutually exclusive instruction panels. The group keeps only one long procedure visible, saving space on a handheld screen. That choice has a cost: a technician comparing two procedures cannot keep both open. If comparison is common, independent details elements or ordinary headings are better. Use a real summary for each panel and place related disclosures together under one heading.

<section>
  <h2>Equipment inspection steps</h2>
  <details name="inspection-steps" open>
    <summary>Check the seal</summary><p>Record the seal code before opening the crate.</p>
  </details>
  <details name="inspection-steps">
    <summary>Measure the package</summary><p>Use the calibrated depot scale.</p>
  </details>
  <details name="inspection-steps">
    <summary>Release the package</summary><p>Confirm the signed inspection note.</p>
  </details>
</section>

Behavior and ownership

Only one member starts open. The browser handles the disclosure state, but it does not complete an inspection, save a checklist, or prevent a technician from skipping a panel.

Performance and maintenance

This is a native interaction with no application bundle. The main cost is task friction when users need simultaneous panels; test the workflow before choosing exclusivity.

Common Mistakes

• Do not set open on two details in the same name group.
• Do not use a disclosure as a substitute for required form validation.
• Do not group panels that users need to compare side by side.

Connected lessons

• HTML details and dialog: distinguish disclosure from a modal task
• HTML focus order: use native controls and keep DOM order usable
• HTML viewport metadata: let a mobile layout use device width

CSS behavior decisions

• CSS interpolate-size: animate toward content height carefully

Related CSS decisions

• CSS ::details-content: style the disclosure body while keeping native behavior