Three approaches: native details/summary, a custom toggle, and a single-open accordion. Each widget is wrapped in a container with class "example", and the controlled content container uses class "details".
An expand/collapse widget lets users reveal or hide additional information on demand. The native HTML details/summary element provides built-in accessibility and keyboard support.
Use this when you want to keep pages concise while allowing deeper dives into specific topics.
It requires no JavaScript, is accessible out-of-the-box, and respects user expectations for disclosure controls.
This region is controlled by the button above. When opened, the button reflects its state via aria-expanded="true".
The container for the controlled content uses a "details" class, even though it is a div.
Tip 1: Provide meaningful labels on toggle controls.
Tip 2: Keep content concise and scannable.
Tip 3: Preserve state when possible on navigation.
Accordions organize related content into collapsible sections. This version ensures only one section is open at a time.
Buttons expose aria-expanded and aria-controls. Panels identify their label with aria-labelledby.
Visual affordances (chevrons, hover states, focus rings) help users discover interaction and maintain orientation.