Expand/Collapse Widget
Two accessible examples: a custom button controlling a region, and a native <details> disclosure.
Each widget is wrapped in a div.example, and the controlled content container uses the details class.
Example 1: Button controls a region
This content is controlled by the button above. The button updates aria-expanded, and this region is shown/hidden.
- Keyboard accessible
- Screen-reader friendly
- Uses
aria-controls+role="region"
Example 2: Native disclosure with <details>
More information (native)
This example uses the native HTML <details> element. It provides built-in accessibility and keyboard support.
- Built-in toggle behavior
- Works without JavaScript
- Supports keyboard interaction by default