Expand/collapse widget examples
These examples show two common patterns for revealing and hiding content. Both support keyboard use and clear focus styles.
Example 1: Native <details> / <summary>
More about scheduling
When you open this section, you can read additional guidance without leaving the page.
- Press Enter or Space on the summary to toggle.
- Focus stays predictable as you move through the content.
- Long text will wrap to avoid horizontal scrolling at narrow widths.
Learn more: MDN: details element
Example 2: Button toggles a region
Details are hidden.
This pattern uses a button with aria-expanded and aria-controls.
The content container uses the details class and is hidden with the native hidden attribute.
Tip: After expanding, you can continue tabbing into the revealed content. Press the button again to collapse.