This is a basic expand/collapse component controlled by a button.
It animates height, updates aria-expanded, and can be toggled with mouse, touch, or keyboard.
Tip: Press Tab to focus the button, then press Enter or Space.
Expand/Collapse Widget
Each widget is wrapped in a div.example. The controlled content container uses the details class.
Example 1: Simple section
Example 2: Starts expanded
Because this one starts open, the script measures and sets its height on load.
Status: Open
ARIA:
aria-expanded="true"
Class: details
Example 3: Nested content
Q: Can the content include lists?
A: Yes. Any markup can go inside the details container.
- Lists
- Links
- Forms