Collapsible

The Screen Options allow you to choose which dashboard metab...

A collapsibleA collapsible is a type of content that can expand and colla... is a type of contentContent consists of text, images, headings, and other inform... that can expand and collapse when it is clicked. CollapsiblesA collapsible is a type of content that can expand and colla... are compatible with the visual text editor and are helpful for making dense, long pages of heavy content 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 content you’d like to collapse with a collapsible shortcodeA shortcode is a way of quickly embedding a small piece of f....

[collapsible heading="Collapsible Example"]
Your content here
[/collapsible]

Example

The example code above will create this element:

 

Options

Options for the collapsible shortcode include customizing the heading, heading size, ID attribute, and whether or not the collapsible section is opened by default when you open the page. You can also link to content within a collapsible if necessary.

See collapsibles documentation on TechWeb

Best Practices

  • Collapsibles work best when grouping related information. Use at least 2–3 collapsibles per grouping.
  • Users should be able to clearly navigate the content using the collapsible headings only.
  • Do not use collapsibles in situations where the user will need most or all of the content on the page to answer their questions. Clicking individual collapsibles on the page quickly becomes tiring in this situation.
  • If your page is extremely long, consider dividing your content up into multiple smaller, more targeted pages instead.

Source: Nielsen Norman Group

When to Use Collapsibles

Examples in Practice