Expandable/collapsible sections


A region of content that can be expanded and collapsed, forcing any adjacent content to be pushed vertically or horizontally across the page accordingly.

Expandos are often used to declutter secondary content (e.g. 'Show more'), navigation links (usually a toggle icon in the shape of an arrow) and form options.

Working Examples

You can take a look at the expando pattern in action on our examples site.

Best Practices

Must be controlled by a button, checkbox or radio button.

Must not be controlled by a link.

Interaction Design


For regular buttons, pressing ENTER or SPACE on button will expand or collapse content accordingly.

For radio buttons, changing the selected option will expand or collapse content accordingly.

For checkboxes, checking or unchecking the checkbox will expand or collapse content accordingly.

Screen Reader

With virtual cursor on button, checkbox or radio button, screen reader will announce current expanded/collapsed status.

When content is expanded, screen reader will announce contents of expanded region.

Developer Guide

Content coming soon.

The Future

The HTML5 <details> element provides expand collapse behaviour without any need for CSS or JavaScript. Unfortunately there is insufficient browser support to consider using it right now.

results matching ""

    No results matching ""