Examples of native and custom expand/collapse controls. Each controlled content container uses the class details.
An expand/collapse widget lets users reveal or hide additional information on demand. The native HTML element <details> with a <summary> provides a built-in accessible option.
This example uses the details element as the container for the controlled content and adds the class details to it.
This panel is controlled by the button above using JavaScript. The container for the content uses the class details and is initially hidden.
State is announced to assistive technologies via aria-expanded on the button and role="region" with aria-labelledby on the controlled container.
Accordion panels are controlled so only one is open at a time. Opening this panel will close any other open panel in the same group.
Each controlled content container has the class details. Buttons advertise their state using aria-expanded.
Use this pattern for FAQs, step-by-step guides, or any content you want to reveal progressively.