Expand/collapse blocks organize content under headings. Users can click on an expandable content heading to display its information.
Block setup
Elements to consider when building Expand/collapse blocks:
Section layout
The layout of the section (width of the section) will affect the width of the Expand/collapse group.
Descriptive headings
Use a descriptive heading to describe the content in each expandable section. Accessible heading order should be used - headings in expand/collapse content blocks are used to follow web accessibility guidelines and will not change the appearance of the text.
Block formatting
A heading section divides the content into collapsable sections. Once the content is created then it can be "embedded" on a page.
Restrictions
There are no restrictions on where this can be used.
If the information is important and needs to be scanned quickly on the page, the Expand/collapse block may not be the best choice to share that content.
Block examples
- A single Expand/collapse group placed within a wide contained width section
- The "Expand/collapse all" buttons will not display if only a single group is placed within a block
- An Expand/collapse grouping (three groups) placed in an extra-wide width section
- In order for the "Expand/collapse all" buttons to display, all groups must be part of the same block