Basic expand/collapse
This is a simple collapsible section controlled by the button above.
Use Tab to focus the button and Space or Enter to toggle. The content container is a div with class details.
Tip: You can put any HTML here: lists, images, or forms.
Nested sections
Overview content with a nested collapsible subsection.
This nested section can be expanded independently.
- It uses the same toggle behavior.
- ARIA ties the button to this region via
aria-controls.
Accordion group (one open at a time)
Content for the first accordion item.
Only one accordion panel stays open within this group.
Content for the second accordion item.
- Toggling this will close the first item.
- Buttons update their
aria-expandedstate.
Content for the third accordion item.
You can include links, like this example link.