Example 1: Basic expand/collapse
Show more information
This panel is the controlled content. It can be expanded and collapsed using a mouse, touch, or keyboard (Tab to focus the summary, then press Enter or Space).
Tip: Your screen reader should announce whether the section is expanded or collapsed.
Example 2: Starts expanded
Frequently asked questions
Q: What makes this accessible?
A: The native element provides built-in semantics and keyboard support, including an accessible state (expanded/collapsed).
- Operable with keyboard
- Clear focus indicator
- Good color contrast