Skip to main content

Submenu Example: Accordions

Sample Accordion Heading

Enter content here


Accordion Code

To add an accordion 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 at the very top of the page.

<!-- wp:html -->
<h2 class="btn_toggle">Sample Accordion Heading</h2><div class="slide_toggle">
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Enter content here</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
</div>
<!-- /wp:html -->

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