Expand / Collapse Widget
Simple details (collapsed)
This area contains content that can be expanded or collapsed. It is hidden from assistive technologies when collapsed and is exposed when expanded.
Tip: Use the Enter or Space key when the button has focus to toggle.
Expanded by default
This example initializes in the expanded state. JavaScript inspects the button's aria-expanded attribute on load to determine whether to reveal the content.
- Accessible: uses aria-expanded and aria-controls
- Smooth: uses max-height transition for animation
- Responsive: supports keyboard interaction