Collapsible
A collapsibleA collapsible is a type of content that can expand and colla... More is a type of contentContent consists of text, images, headings, and other inform... More that can expand and collapse when it is clicked. CollapsiblesA collapsible is a type of content that can expand and colla... More are compatible with the visual text editor and are helpful for making dense, long pages of heavy contentContent consists of text, images, headings, and other inform... More easier to digest for users. They can make a pageA page is often used to present “static” information abo... easier to navigate and help your users quickly understand what information is available to them on the pageA page is often used to present “static” information abo....
Demo
How to Use
Simply wrap the contentContent consists of text, images, headings, and other inform... More you’d like to collapse with a collapsibleA collapsible is a type of content that can expand and colla... More shortcodeA shortcode is a way of quickly embedding a small piece of f... More.
[collapsible heading="Collapsible Example"]
Your contentContent consists of text, images, headings, and other inform... More here
[/collapsible]
Example
The example code above will create this element:
Collapsible Example
Options
Options for the collapsibleA collapsible is a type of content that can expand and colla... More shortcodeA shortcode is a way of quickly embedding a small piece of f... More include customizing the heading, heading size, ID attribute, and whether or not the collapsibleA collapsible is a type of content that can expand and colla... More section is opened by default when you open the pageA page is often used to present “static” information abo.... You can also link to contentContent consists of text, images, headings, and other inform... More within a collapsibleA collapsible is a type of content that can expand and colla... More if necessary.
See collapsibles documentation on TechWeb
Best Practices
- CollapsiblesA collapsible is a type of content that can expand and colla... More work best when grouping related information. Use at least 2–3 collapsiblesA collapsible is a type of content that can expand and colla... More per grouping.
- Users should be able to clearly navigate the contentContent consists of text, images, headings, and other inform... More using the collapsibleA collapsible is a type of content that can expand and colla... More headings only.
- Do not use collapsiblesA collapsible is a type of content that can expand and colla... More in situations where the user will need most or all of the contentContent consists of text, images, headings, and other inform... More on the pageA page is often used to present “static” information abo... to answer their questions. Clicking individual collapsiblesA collapsible is a type of content that can expand and colla... More on the pageA page is often used to present “static” information abo... quickly becomes tiring in this situation.
- If your pageA page is often used to present “static” information abo... is extremely long, consider dividing your contentContent consists of text, images, headings, and other inform... More up into multiple smaller, more targeted pages instead.
Source: Nielsen Norman Group
When to Use Collapsibles
- Long FAQ pages
- Step-by-step directions, such as how to apply to an academic program
- Course listings, such as courses listed in degree requirements pages