Expand/Collapse Widgets

Two accessible patterns: a custom button-controlled panel, and a native <details> disclosure.

Example 1: Button toggles a controlled panel

Pattern: <button> + aria-expanded + region panel.

Example 2: Native `<details>` disclosure

More information

This uses native HTML disclosure behavior, which is accessible by default.

You can put any content here, such as links:

Jump to Example 1
Back to Example 2 title

Pattern: <details> + <summary> (native expand/collapse).