Styled Example

This is the content area for the expandable section. It can contain any type of content including text, forms, or other components.

About Expandable Section

Section Titles are interactive titles that open and close sections, typically on a form.

Accessibility

If the Section Title is interactive, the button needs to be associated with the section so that assistive technology knows what the button opens and closes. The button and section also need ARIA attributes to indicate the open and closed state of the section.

Markup

Button:

  • aria-controls is used to create an association between the button and the section. If the section has an id="content", then the button should have aria-controls="content".
  • aria-expanded indicates if the section is open or closed and is read aloud by assistive technology when the button is focused.

Section:

  • aria-hidden indicates if the section is open or closed, and if set to true, assistive technology hides the section.

Keyboard Interactions

  • The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.

Updating Operation and State

  • When the user interacts with the button to open the section, aria-expanded on the button should be true and aria-hidden on the section should be false.
  • When the user interacts with the button to close the section, aria-expanded on the button should be false and aria-hidden on the section should be true.

Base

Default Expandable Section

This is the base expandable section. It starts in an open state and can be toggled by clicking the section title.

The content area can contain any HTML elements including forms, lists, or other components.

Examples

Non-collapsible

Non-collapsible Section

This section cannot be collapsed. It does not have an interactive button and remains always visible.

Use this variant when you want to maintain the visual styling of an expandable section but keep the content permanently visible.

With Form Content

States

Closed

Multiple Sections

This is the first section containing personal information fields.

Interactive Controls