Expand / Collapse Widget — Examples

This is a basic expand/collapse widget. It uses a button with aria-expanded and a controlled container with class "details".

• Accessible: the button toggles aria-expanded.
• The content container has class "details".

This example demonstrates an item that starts expanded. The widget sets aria-hidden="false" on the details container to reflect its visibility.

Try toggling to see smooth height animation.

Details can include focusable controls:

Option A
Option B