Expandable and Collapsible Content
The Expand and Collapse layout style is intended to compress content making it easier to find a subject.
Content Approver
Content Approver
You Request Must Include :
- Word Mockup
- Specify in your mockup where you want to have an expand/collapse by:
- Indicating "add expand/collapse here" using the Comment feature.
- Label each new expand/collapse section with a heading followed by normal text for the content of the section.
- Subsections within the content will be coded as a nested expand/collapse. Please keep subsections to one level only.
- Highlighting in grey behind the selected text using the "Shading" feature can also be a helpful visual indicator.
Standard Expand/Collapse
One
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem atque perferendis cumque eum tenetur voluptatibus expedita magnam non iste velit. Voluptate, vel ea, debitis possimus architecto eos atque. Expedita, facere.
Two
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor corporis iusto illo laborum nesciunt voluptatem mollitia quisquam quia, nisi vel, impedit corrupti non laboriosam magnam, debitis. Enim architecto, dolorum pariatur!
Three
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam reprehenderit deleniti vel, voluptates quo nostrum quibusdam minus! In cumque illum, debitis beatae aliquid repellat soluta, nisi molestias blanditiis ipsum.
Content Publisher
Content Publisher
The Expand/Collapse (details/summary) layout style is intended to compress content making it easier to find a topic. There are two types available, one that retains the open state regardless of how many sections are opened and the Accordion style that has only one section open at a time. Also available for this content layout method are buttons that will expand all and collapse all sections and a filter field to reduce the content to items containing a keyword or phrase.
- Examples of Expandable/Collapsible content
-
- iService Catalogue — Human Resources Services
- (Accordion style) Information Categorization Tool
Steps to create Expandable/Collapsible content
The expand/collapse content is often used for long content that needs to be compressed. It is best to provide a way for the user to open all the sections with the click of a button. A filter is also useful to find a keyword or phrase in the content.
One of the rules for expand/collapse content is that there are not supposed to be any headings within the sections. The reason for this is because a screen reader cannot find them if they are hidden. Code subsections as nested expand/collapse sections. Encourage the client to keep these to one level only.
Surround the entire expand/collapse with a div tag with the id "details-elements". This is target for buttons "Expand All" and "Collapse All". The buttons are added using an include which is done to keep the code consistent throughout the site.
- Expand/Collapse All buttons code:
<!--#include virtual="/includes/sp-es_prv/wet4/en/expand_bttns_only_EN.html" -->
<!--#include virtual="/includes/sp-es_prv/wet4/fr/expand_bttns_only_FR.html" -->
Incorporating the filter works best on a list, so add the class "wb-filter" the unordered list.
<ul class="list-unstyled wb-filter">
Code
<div id="details-elements">
<!--#include virtual="/includes/sp-es_prv/wet4/en/expand_bttns_only_EN.html" -->
<ul class="list-unstyled wb-filter">
<li>
<details open=""><summary>Example 1</summary>
...
</details>
</li>
<li>
<details><summary>Example 2</summary>
...
</details>
</li>
</ul> </div>