An accordion can be a great way to break up your content into sections without presenting all your text at once, allowing you to organize your page content and give visitors extra control over the information they immediately engage with.

How to Add an Accordion

You can add an accordion to any page or post content on your website by adding the Accordion block in your WordPress Editor.

  • Make sure you’re signed in to the back end of your website and navigate to the page where you’d like to add an accordion.
  • In the upper left-hand corner of your page editor, find and click on the plus sign to add a block. Search for and select “Accordion” to add the accordion block to your page.
A screenshot of the Layout Elements highlighting the Accordion block  icon and pointing at the Add New Block icon
  • Once the block has been added, you can begin entering your content. The heading you enter will be displayed at the top of the accordion section, and the content that follows will be displayed within that expanded section.
A screenshot of the Accordion section heading and Accordion section content
  • Your accordion section content can be formatted using the text toolbar. Simply select the text you’d like to edit, and the toolbar options allow you to format text as bold or italic, align it left, right or center, and even add links.
A screenshot of the Accordion block with content, highlighting the text toolbar
  • To add another section to your accordion, select the last item and hit the “Add a Section” button. You can add as many sections to an accordion as you want.
A GIF demonstrating how to add another section to an accordion
  • You can hide or show the content of each section you’ve added by clicking the arrows icon in the top section toolbar or by clicking the up arrow on the right side of that section’s heading.
A screenshot of the Accordion block  highlighting the arrows icon
  • The Accordion block allows you to use “inner blocks” to further format the content within your accordion sections. You can add an inner block by adding a new section and selecting the plus sign on the right side of the section, as shown below.
A screenshot of the Accordion block and Most Used layout elements, pointing at where to add a new block and search for a block
  • You can also add an inner block by hovering over the existing section content and selecting the plus icon at the top of that section within the accordion. Click on the plus icon to add a new block within the accordion.
  • In the example below, an icon block has been added to the accordion. Learn more about adding and using the icon block.
A screenshot of an Accordion block with and icon block added to it
  • If you ever need to reorder the accordion sections, you can do so using the toolbar that appears when you hover over a section. Simply hover over the section you want to move and select the up or down arrow on the left-hand side of the block.
A GIF demonstrating how to reorder the accordion sections
  • Once you’ve got your accordion set up the way you’d like, preview or publish your changes by clicking the gray Preview button or blue Update button in the upper right-hand corner of your screen.

Still Have Questions?

The quickest way to get support is to reach out to us within your website’s admin dashboard. Log into your website and then fill out the Request Help form. You’ll hear back from us within one business day.