UPDATE: Georgia Southern moving to online instruction for all courses for the remainder of the semester effective March 30.
Visit our COVID-19 response page for full information.

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. Create a blank line where you can paste in the code from below.
    The easiest way to do this is to go to the title of your page and hit enter/return.
  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. Click into the empty line you just created.
    It should say “Start writing or type / to choose a block”
  2. Paste the code in the empty line.

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: 3/24/2020