Expand / Collapse Widget Examples

This is an example of an accessible expand/collapse widget. The button above controls this content region. The button uses aria-expanded to indicate state and aria-controls to point to this container.

The container uses the class "details" as requested.

Section A contains details relevant to the first subject. Multiple, independent expand/collapse widgets can coexist on the same page without interfering with each other.

Section B contains different content. Each button controls its own region via its aria-controls attribute.