Expand/Collapse Widget Demo

Click the button to expand or collapse the content. Each widget is wrapped in an element with the class "example". The content container uses the class "details".

Overview: This is a simple expand/collapse widget implemented with a button and a controlled content panel.

Use the widget to show or hide additional information without navigating away from the page.

Accessible: uses ARIA attributes to communicate state to assistive tech.
Keyboard friendly: Enter and Space toggle the panel.
Pure CSS + JavaScript: lightweight and dependency-free.

Tips:

Keep the collapsed content concise to avoid overwhelming users.
Provide a clear heading or summary in the collapsible content.
Offer multiple widgets to demonstrate variety in your UI.