This widget demonstrates a simple expand and collapse pattern using a button to reveal additional information.
The state of the button is synchronized with the visibility of this content, updating both the aria-expanded
attribute and the button label for assistive technologies.
You can easily adapt this pattern to show FAQs, explanatory text, or any content that benefits from progressive disclosure.
An accordion is a vertically stacked interface element that allows users to reveal or hide sections of content. Typically, only one panel stays open at a time to keep the interface tidy and focused.
Exclusive expansion ensures that only the most relevant section is visible, reducing cognitive load. It is especially helpful when space is limited or when users need to compare sections one at a time.
Each trigger button advertises its relationship with the controlled region using aria-controls.
The aria-expanded attribute keeps assistive technology informed about the current state,
and the content area is hidden using the hidden attribute when collapsed.