Expand / Collapse Widget Examples

Summary: This content is initially collapsed. Use the button above to expand and reveal the details. The button updates aria-expanded and the content is linked via aria-controls for assistive technologies.

Note: keyboard users can press Space or Enter while the button is focused to toggle.

More information: This instance begins expanded. The same pattern is used: a button controls a region with a matching ID. Toggling updates aria-expanded on the button and shows/hides the region.

• Accessible name provided by the button which labels the region via aria-labelledby.
• Screen readers will see the region when aria-expanded is true.