This page shows different patterns for expand/collapse widgets. Each widget is wrapped with a container having the "example" class, and the container for controlled content uses the "details" class.
An expand/collapse widget hides non-critical content until the user chooses to reveal it. The native HTML details/summary pattern provides built-in accessibility and toggling behavior without JavaScript.
This panel is controlled by a button. Click the button to toggle visibility. The button updates its aria-expanded state for assistive technologies, and the panel is hidden/shown accordingly.
You can place any content here, such as images, lists, or forms.
Content for section one. Only one section remains open at a time in this accordion.
Content for section two. Opening this will close any other open section.
Content for section three. Use Tab to navigate and Enter/Space to toggle sections.