Skip to main content

Submenu Example: Collapsibles

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

How to add a collapsible to your page

To add a collapsible to your page, first, switch to the code view. You can do that by clicking on the three buttons at the top right of your page and clicking on “Code Editor”. Then go to the top or bottom of your page and click return/enter a few times to give you space to paste in the code below. Make sure you don’t copy the code inside of the existing code, it could cause errors on your page. Now, copy and paste 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 -->

Once the code is inserted into your page correctly, it should look like the following screenshot.

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: 12/4/2019