Expand/Collapse Widget Demo

Wraps each widget in an element with class "example". The container that holds the collapsible content uses the class "details".

This is the first expandable panel. It demonstrates a simple expand/collapse interaction using a button to control the visibility of the content container.

Features:

Accessible with ARIA attributes
Content inside a dedicated details container
Wrapped in an example block

Here is another panel with a longer paragraph to illustrate how the widget behaves with more content.

Tip: You can reuse the same pattern for multiple collapsible sections on a page.

Content inside the third panel demonstrates nested elements and a clean separation between the trigger and content.

Uses a dedicated container for controlled content
Accessible labels connecting the button to the content