Adding an Accordion to Your Content

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.
Add a Block
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
Add Inner 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.
  • 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.
Reorder Content
  • 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?

Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.