Each widget below is wrapped in a div.example. The container for the controlled content uses the class "details". Buttons use aria-expanded and aria-controls for accessibility.
Basic Expand/Collapse
Summary: This is a simple reveal region. The button's aria-expanded attribute toggles between true/false and the content has aria-hidden to reflect visibility for assistive technologies.
Tip: Use the button to toggle the content.
Animated Expand/Collapse
Animated content: This content expands and collapses with a smooth transition of height, opacity and slight movement. The script sets aria-hidden and aria-expanded consistently for accessibility.
Point A
Point B
Point C
Keyboard: focus the toggle and press Space or Enter to open/close. Press Escape while focus is inside the details to close it.
Multiple Independent Sections
Content for section A
Content for section B
Each section is independent and uses the same role/attributes pattern.