Expand / Collapse Widget

Details for item one

This area contains the controlled content. It is revealed or hidden when the button is activated. The button uses aria-expanded and aria-controls to convey state to assistive technologies.

You can place any HTML content here: text, images, forms, lists, etc.

Advanced Options

• Option A — explanation and additional text showing a longer content area to demonstrate smooth expansion.
• Option B — more explanation that wraps to multiple lines so height calculation is tested.
• Option C — a final option to illustrate variable-height content.

The script measures content height dynamically to animate to the correct height and then removes the inline height to allow natural resizing.