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.
You can take a look at the expando pattern in action on our examples site.
Must be controlled by a button, checkbox or radio button.
Must not be controlled by a link.
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.
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.
Content coming soon.