Expand/Collapse Widgets

These examples use native, keyboard-accessible disclosure widgets. Use Tab to focus a summary and press Enter or Space to toggle.

Example 1: Basic disclosure

What is this widget?

This is a native HTML disclosure pattern using <details> and <summary>.

It provides built-in expand/collapse behavior and communicates state to assistive technologies.

Example 2: Multiple sections (FAQ style)

Can I navigate it with a keyboard?

Yes. Focus the summary with Tab and toggle with Enter or Space.

Does it work without JavaScript?

Yes. The disclosure behavior is provided by the browser.

Where can I learn more?

See the MDN documentation for HTML <details>.

  • Use concise summary text.
  • Keep revealed content readable and structured.
  • Avoid placing interactive elements inside the summary.