Skip to main content

Submenu Example: Accordions

Sample Accordion Heading

Content here

Enter content here

Adding an Accordion to Your Page

To add an accordion 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:heading {"className":"btn_toggle"} -->
<h2 class="btn_toggle">Sample Accordion Heading</h2>
<!-- /wp:heading -->

<!-- wp:group {"className":"slide_toggle"} -->
<div class="wp-block-group slide_toggle"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":3} -->
<h3>Content here</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Enter content here</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->
  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!

This will give you a heading block and a group with content blocks inside of it. The heading block will be the heading that has the arrow to allow the dropdown. Feel free to change that heading to match your page’s outline order. Anything within the group will be what is hidden until they click the header.

Please note that Accordions 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, Accordions can present serious usability and accessibility challenges and should not be over- or misused on your website.  Use the following criteria when considering Accordions on your site:

  • Accordions 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