Expand/Collapse Widget Demo

Each widget is wrapped in an element with class "example". The content container uses a details element with class "details".

What is an expand/collapse widget?

An expand/collapse widget lets users hide or reveal content on demand. In this demo, we use the native HTML details and summary elements to provide an accessible, keyboard-navigable experience.

Example: Frequently Asked Questions
  • Q: How does it work?
  • A: Click the header to toggle visibility of the content beneath.
  • Q: Is it accessible?
  • A: Yes. The native details/summary elements provide built-in accessibility features.
Another example: Collapsible tips
  • Tip 1: Use clear headings for each section
  • Tip 2: Keep the content concise and scannable
  • Tip 3: Provide a short summary of what’s inside