An expand/collapse widget reveals supplemental content on demand. The native details element provides built‑in accessibility, keyboard support, and progressive enhancement.
Use summary as the control, and details as the collapsible container.
Native Details Element
Overview: What is an expand/collapse?
This uses the HTML details/summary element with a container class of "details".
Custom Disclosure Button
Region: Additional information
This disclosure uses a button that toggles the visibility of a content region. The button announces its state via aria-expanded and references the controlled region via aria-controls.
The region is hidden and shown by toggling the hidden attribute.
A button controls a "details" container via aria-controls.
Accordion (One Panel Open)
Region: Introduction
An accordion is a set of panels where activating a header reveals content while optionally collapsing others.
Region: Usage
Use accordions to reduce page clutter and organize dense sections. Keep titles short, descriptive, and scannable.
Region: Accessibility
Provide clear focus styles, ensure buttons are real buttons (not divs), and update aria-expanded to reflect current state.
Buttons toggle "details" panels. Only one panel is open at a time.