Examples showing native and custom expand/collapse behaviors. Each widget is wrapped in a container with class example, and the controlled content uses a container with class details.
An expand/collapse widget reveals additional content on demand. This native example uses the HTML <details> element with a <summary> as the toggle.
This section starts expanded using the open attribute. Click the summary to collapse it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in dui vel arcu fermentum dictum. Phasellus non diam at lorem porta tristique.
This example uses a button to control the visibility of a content region. The button’s aria-expanded reflects the open state, and the content container has a details class.
Because this is custom, JavaScript handles toggling and optionally animates the reveal.
hidden and an animation class<details> element