Expand / Collapse Widget Examples

Each widget is wrapped with a div.example. The controlled content uses a container with the class details. Buttons use aria-expanded and aria-controls for accessibility.

Simple details

Click the button to reveal additional content.

This is an example of a simple expand/collapse widget. The button controls the visibility of this content. The script animates the opening and closing for a smooth transition and preserves accessibility attributes.

Accessible attributes: aria-expanded and aria-controls on the button; aria-hidden on the details region.

More elaborate content

Content includes text and a decorative image.

Here's a longer description with a small decorative illustration. In real usage this area could contain forms, lists, or any interactive content you need to reveal on demand.

Images used here are decorative; they include empty alt text. Interactive elements placed inside should be focusable and reachable by keyboard.

Accordion (single-open)

Only one section stays open at a time.