Skip to main content

Submenu Example: Collapsibles

This is where your content will go. Add any content or blocks here.

Adding a Collapsible Area to your Page

To add a collapsible area to your page, follow the instructions below.

  1. Switch your page to the code editor view. You can find this option by going to the three dots in the top right.
  2. Copy the code from below.
<!-- wp:shortcode -->
[collapse title="Sample Collapsible Heading"]
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>This is where your content will go. Add any content or blocks here.</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
<!-- /wp:shortcode -->
  1. Paste the code at the top of the code editor then switch back to your visual editor. Be sure not to paste over any existing code!

Once the code is inserted into your page correctly, it will look like the following screenshot. It will create two shortcode blocks with a paragraph block between them.

To change the header of the collapsible area, in the first shortcode block it created, replace “Sample Collapsible Heading” with the text you would like for people to click to show the hidden content.

Anything above the second shortcode block will be the content that is hidden until they click the header.

Please note that Collapsibles should not hide or make it unnecessarily difficult to find important information on your pages. While they can be useful in allowing visitors to choose the content that is most relevant to them, Collapsibles can present serious usability and accessibility challenges and should not be over- or misused on your website.  Use the following criteria when considering Collapsibles on your site:

  • Collapsibles are appropriate when visitors need only a few pieces of content on a page.
  • Avoid them when users need all or most of the content within each heading – organize your content using plain text and subheadings instead.

For more on this topic, read the Nielson Norman Group’s article “Accordions Are not Always the Answer for Complex Content on Desktops.”

Last updated: 5/6/2020