Accessible expand / collapse widgets
Two examples: a single expand/collapse region and a keyboard-accessible accordion with arrow-key navigation. Use Tab, Enter, Space to toggle, and arrow keys to move among accordion headers. Content panels use the details class.
Single expand / collapse
A single toggle button that controls a nearby content region. This pattern is appropriate for revealing additional details.
Accordion (keyboard accessible)
Multiple sections where only the content for the expanded header is shown. Use Up/Down/Home/End keys to navigate between headers. Only one header is tabbable at a time (roving tabindex).
This section is open by default. It contains explanatory content and demonstrates how content reflows at narrow widths. Resize the window to see stacking behavior. Long words or URLs will wrap as needed: https://example.com/very/long/path/that/should/wrap
Notes
This demo uses native buttons, proper aria-expanded/aria-controls, and hidden attribute to remove collapsed content from the accessibility tree. It also adapts to OS high contrast settings.