Overview
This section demonstrates a basic expand/collapse pattern. Click the button above to reveal or hide the content controlled by the widget.
Key points:
- The toggle button manages visibility of the content.
- The content container has a
detailsclass. - ARIA attributes reflect the current state for assistive technology.
FAQ: Common Questions
What is an expand/collapse widget?
It’s an interactive control that toggles the visibility of additional content.
Why use it?
It keeps pages tidy by hiding details until they’re needed, improving scan-ability and focus.
Is it accessible?
Yes—when implemented with proper semantics. Here we use a native button, the aria-expanded attribute, and connect the button to its content via aria-controls.
Advanced: Nested Content
This example includes more structured content, such as a list and a secondary callout.
- Collapsible sections can contain any HTML elements.
- State is managed by JavaScript to set
hiddenappropriately. - Styling uses simple CSS and can be customized.
Tip: Keep labels descriptive so users know what will be expanded.