This page demonstrates several expand/collapse widgets. Each widget is wrapped in a div with the class "example", and each controlled content container uses the "details" class.
Uses the built-in HTML <details> element with a <summary> for accessible expand/collapse behavior.
This content is inside a native details element. It is accessible and requires no JavaScript to expand or collapse.
A button with aria-expanded toggles a region identified by aria-controls.
Here are some notes about the project:
When you click the button, this section is shown or hidden, and the button's aria-expanded updates accordingly.
Only one section stays open at a time within this accordion.
An accordion is a vertically stacked set of expandable items. Selecting a header reveals its associated content area.
They save space and help organize content. They allow users to focus on one section at a time without being overwhelmed.
aria-expanded to reflect state.aria-controls and aria-labelledby to link triggers and panels.