When to use
An expansion panel is a way to organise related content without showing it all at once. This enables users to scan pages or views more effectively. By initially hiding non-essential information, an expansion panel could reduce cognitive load. There may also be other reasons to use an expansion panel. To summarise, these could be the following:
- To organise/ group related content;
- To reduce the cognitive load by initially hiding non-essential information;
- To create relatively short pages or views when there is limited space available.
Layout and positioning
An expansion panel should occupy the width of the content section it is part of. It should always match the width of the (other) content since it is part of the same group and in order to provide a consistent, readable experience.
In terms of positioning, an expansion panel can be placed anywhere on the page. However, the subjects covered in the expansion panel should match the content section (which usually includes a heading) it is part of.
Accessibility considerations
...