Expand/Collapse Widget Demo

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

HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure of the page using elements and tags.

This widget demonstrates a simple expand/collapse interaction implemented with a custom toggle.

Click the button to show or hide the content.
Use the Tab key to focus the button and press Enter/Space to toggle if needed.
The aria-expanded attribute communicates the current state to assistive technologies.

Accessibility: The widget uses ARIA attributes to indicate expanded/collapsed state. The content container is marked as a region for assistive technologies.

Tip: This pattern can be extended to include animations or to close other sections when one opens, if desired.