Expandable/collapsible content
- Charlotte Armstrong
- Katie McElroy
- Carter Reid
Expand/collapse content blocks hide content under headings. Users can click on an expandable content heading to view the hidden information below.
For more information on the block, visit Expand/collapse in our Block library.
When to use expandable content
When a page has multiple sections regarding the same topic.
For content that users need to view only a certain subset at one time.
When content can be logically broken up into sections.
Examples of common places to use expandable content are:
Policy pages: Policy pages are normally lengthy documents with multiple sections. Having users focus on descriptive headings and choose the content that is relevant to them would make policy pages a perfect candidate for expandable content.
Frequently Asked Questions pages: These pages are the most common place expandable content is used so many users may be familiar with this format. Here questions are turned into headings while answers are hidden away. This makes it easier for users to drill down to the information that they need.
Benefits
Can be used to break down a topic into different sections.
Reduces page scrolling.
Allows a user to focus on headings.
They can be opened or closed independently of each other.
Considerations
Each expandable title should be descriptive of the content under it.
Avoid using expandable content to hide small amounts of content such as a link or a sentence or two.
Usability concerns
Search engines like Google will index the hidden content but when a user gets to the page it may not be obvious where to find that content and using the ‘find’ feature (Ctrl-f) in the browser will not produce any results.
Users may not be familiar with the function of opening and closing the sections.
Some users may prefer to scroll through content rather than click to open and click to close sections.
Create Expandable/collapsible content
From the administration bar, select Workbench, and then select My Dashboard.
Navigate to the Content List panel and select the page you wish to add expandable/collapsible content to.
On the content page, select Layout.
In the section you are adding expandable/collapsible content to, select + Add block.
From the list on the right, select Expand/collapse under Content.
Add a Title. The title will appear above the block unless Display title is unchecked. Note: When new Expand/collapse blocks are created, “Expand Collapse” will be the default Title and Display title will be checked. Be sure to edit this accordingly.
Choose a Heading selector. Headings should be used in proper order (e.g. h1, h2, h3). For example, if it is going to be part of content that has a h2 header, then the block should use a h3 header for proper accessibility. For more information about proper use of headers, visit the University of Waterloo Brand Formatting web page. Note: Headers in expand/collapse content blocks are used to follow web accessibility guidelines and will not change the appearance of the text.
Create an Expand/collapse group by selecting the plus icon. This will open a new tab.
Create a group Title. This will be the title of the expand/collapse group that you will link to on the web page.
After saving the group you will be redirected to Layout in a new browser tab, where you will be able to add content. You can add any type of content block to add content to the expand/collapse group. Note: Width of the group will be constrained to the width of the section in which the expand/collapse block is being placed.
Change the revision state to Published from the Save as: drop-down menu. Note: Expand/collapse groups must be published to be visible.
Save layout and close the browser tab with the expand/collapse group. Note: Groups can be viewed and edited through the Content list or created in advance by adding an Expand/collapse group (located under Content types) in My Dashboard.
In the Configure block in the Layout tab, enter the group title and select the desired group using the drop-down menu.
To configure the group, select the Pencil icon. This will open a new tab/window.
To preview your expandable/collapsible content, select the Page icon.
To rearrange the groups, use the crosshair icon on the left to drag them into the desired order.
To add additional groups, select Add expand/collapse group and repeat steps 8 and 9 above as needed.
Select Add block.
Save layout.
