Expand / Collapse Widget Examples

This is a simple example of an expand/collapse widget. It uses a button with aria-expanded and aria-controls. The content container has the class details as requested, and its visibility is managed with JavaScript to animate height changes smoothly.

Overview content. This demonstrates an accordion where only one item can be open at once. Keyboard arrows also navigate between triggers (Up/Down or Left/Right), Home/End jump to first/last.

Details content. This block shows additional information for the second accordion item. When opened, the previously opened item collapses automatically.

More content. The implementation uses JavaScript to ensure only one section is open at a time and adds keyboard navigation to move focus between triggers.

Expand / Collapse Widget Examples

Simple Expand / Collapse

Accordion (Single Open Item)