Expand/Collapse Widget
Each section below can be expanded or collapsed. Use the button to toggle visibility of the content. You can also use Enter or Space to activate the buttons with a keyboard.
Examples
An expand/collapse widget (also known as a disclosure widget) is a UI pattern that allows users to show or hide a section of content. It helps reduce visual clutter and lets users focus on the information they need.
Key characteristics include:
- A toggle button that indicates the current state (expanded or collapsed)
- Content that is shown or hidden based on the toggle state
- Programmatic association between the button and the controlled content
This widget uses the following accessibility techniques:
- A native
<button>element is used as the toggle control, ensuring keyboard operability and correct role announcement. aria-expandedis set to"true"when the content is visible and"false"when it is hidden, communicating state to assistive technologies.aria-controlsassociates the button with the panel it controls.- The
hiddenattribute is used to hide collapsed content from both the visual display and assistive technologies. - A visible chevron icon rotates to provide a visual cue of the current state, supplementing the text.
This pattern is useful in several scenarios:
- FAQ pages — users can scan questions and expand only the answers they need.
- Settings panels — group related options under collapsible headings to reduce cognitive load.
- Long-form content — break up lengthy pages by letting users progressively disclose sections of interest.
- Mobile interfaces — conserve screen space by hiding secondary content behind expand toggles.
Avoid using this pattern when the content is essential and should always be visible, such as critical instructions or primary calls to action.