Basic Toggle Button
A button toggles a content region using the hidden attribute and ARIA semantics.
This is the controlled content. It is initially hidden and becomes visible when the button indicates it is expanded.
- Uses a button with aria-expanded.
- Targets by aria-controls.
- Hides and shows via the hidden attribute.
Accordion (Single-open)
An accordion where only one section opens at a time. Buttons share a common group identifier.
This section gives a quick summary. Opening this will close any other open section in the same group.
- Feature A: Enabled
- Feature B: Optional
- Feature C: Experimental
Q: How does this work?
A: Click a section button to expand. Arrow keys navigate between section headers.
Native details/summary
Leverages the built-in HTML <details> element with a details class applied.
Native expandable content
This uses the browser's native expand/collapse behavior. It works without JavaScript and is fully keyboard accessible by default.
Tip: You can style the summary marker and open state as shown here.