An expand/collapse widget shows or hides content on demand. This is a native HTML implementation using the details and summary elements.
- Keyboard accessible by default
- No custom JavaScript required
An expand/collapse widget shows or hides content on demand. This is a native HTML implementation using the details and summary elements.
This section starts expanded using the open attribute.
Click the summary to toggle collapse.
This is a custom expand/collapse widget powered by JavaScript. The button updates its aria-expanded state and shows or hides this region.
Use this pattern when you need more control than the native details element provides.
Panel A starts expanded.
Click the button to collapse or expand this panel.
Panel B starts collapsed.
Click the button to reveal more content.