Expand / Collapse widget examples

Details: This panel is collapsed when the page loads. Click the button to expand and reveal the content. The button uses aria-expanded and aria-controls attributes to indicate the state and relationship.

Tip: You can activate the button using Space or Enter when focused.

Explanation: This example starts expanded. The script will set the measured max-height so the animation looks smooth. When open, the details element gets the open class so CSS can style it differently (for instance, changing opacity).

<button aria-expanded="true" aria-controls="details-2">...</button>

More info: Each toggle controls its own details region. The script reads aria-controls to locate the associated element. This keeps the markup flexible and semantic.

Examples: You can place any content here — text, forms, lists, images, or even other interactive controls. When collapsed, the region is hidden from assistive technology (aria-hidden="true").

• Point A
• Point B
• Point C