Expand/Collapse Widget
Two accessible expand/collapse widgets. Each widget is wrapped in a div.example, and the controlled content container uses the details class.
It toggles visibility of the controlled content using:
aria-expandedon the buttonaria-controlsreferencing this container- Smooth height animation for expand/collapse
This is a native
<button>, so it works with Tab, Enter, and Space by default. Focus styles use :focus-visible.
- Press Tab to focus the header
- Press Enter/Space to toggle