Skip to main content

Submenu Example: Accordions

Sample Accordion Heading

Enter content here.

Accordion Code

To insert Accordions on a page, paste the following code into the WordPress page editor (HTML mode) and replace the content with your own.

<h6 class="btn_toggle">Sample Accordion Heading</h6>
 <div class="slide_toggle">
 <p>Enter content here.</p>

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 sub headings 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/20/2016