Expand/Collapse Widget Demo

Wrap each widget with a div that has an "example" class. The container for controlled content uses a "details" class.

Custom Toggle (JavaScript)

This is the collapsible content revealed by the custom toggle. It demonstrates how to programmatically expand and collapse content with ARIA attributes.

You can add your own content here, including images, lists, or any other HTML elements.

Native Details Widget
Click to expand

This content uses the native HTML <details> element. The inner container is given the class "details".

This widget leverages the browser's built-in expand/collapse behavior.