How to Show Content in an Accordion with the Gutenberg Editor

An accordion layout allows you to pĺace large quantities of text on a reduced space.

Your site's visitors can get overwhelmed when presented with too much text to read at once. If you use an accordion layout, your visitors can scan and look for the information they need. An accordion is perfect for Frequently Asked Questions, or show specific details in a product you're selling.

In this guide, I'll show you how add an accordion layout in the Gutenberg editor in WordPress.

Video guide to Accordion Blocks

Step #1. Install the PublishPress Blocks Plugin

First, we'll install a plugin to help us complete this task. We're going to use the Advanced Accordion block which is part of this plugin.

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Create a Post

Now let's add a new post for our accordion:

  • Click Posts > Add New.
  • Write a proper title.
  • Click the “+” icon to insert a block after the title or hit the “/” key.
  • Search and select the Accordion block.
200719 Adv Accordion 001
200719 Adv Accordion 001

Step #3. The Advanced Accordion Block

You will be now presented with the Advanced Accordion block. The space with the dark background is there to enter the title of the accordion tab, whereas the space behind that one allows you to insert as many blocks as you want. 

  • Click the gray “+” icon at the bottom to insert a new accordion tab, so we have 3 of them.
  • Enter the proper text.
200719 Adv Accordion 002
200719 Adv Accordion 002

Notice also that you can insert an accordion item by clicking the “+” symbol below each of the tabs.

200719 Adv Accordion 003
200719 Adv Accordion 003
  • Position your cursor on the text of the first tab.
  • Click on the three dots on the right upper corner.
  • Select Insert after. 
200719 Adv Accordion 004
200719 Adv Accordion 004

You can alternatively use the shortcut Ctrl + Alt + Y to insert a block. 

  • Click the “+” symbol on the right and search for the image block. 
200719 Adv Accordion 005
200719 Adv Accordion 005
  • Upload an image or choose one from your media library. 

Notice on the Block configurations on the right for this particular kind of block. 

  • Change the image settings accordingly.
    • Leave the default image style.
    • Enter an Alt text.
    • Change the image size to “Full size”. 
  • Change the image alignment to “center”.
  • Link the image to your homepage.
200719 Adv Accordion 006
200719 Adv Accordion 006
  • Click Publish two times.

You will see the accordion nicely displayed on your frontend.

  • Test all accordion tabs, they have a nice smooth animation. 
  • Check that the link on the image is working properly.
200719 Adv Accordion 007
200719 Adv Accordion 007

Step #4. The Advanced Accordion Settings

These settings will apply to every new accordion you create. Old accordion elements will remain with their former style, so make sure you plan your styles carefully, to have consistency across all elements on the site. On the other side, this feature is very useful because you can have unique accordion elements without the need of altering CSS code, if that’s the case.

  • Go back to the backend of your site (yoursite/wp-admin).
  • Click PublishPress Blocks on the WP admin menu.
  • Click the Default Blocks Config tab. 
  • Click the cogwheel beside Advanced Accordion.
200719 Adv Accordion 008
200719 Adv Accordion 008
  • Toggle the “Initial collapsed” option so it is “on”.
  • Change the background color to your own preference. 
  • Change the Header icon. 
  • Leave the body text settings untouched.
  • Scroll down and add a solid border, 1px thick.
  • Add a border-radius. 
  • Click Save.
  • Close the overlay window.
200719 Adv Accordion 009
200719 Adv Accordion 009
200719 Adv Accordion 010
200719 Adv Accordion 010
  • Create a new post with an accordion in it, like described in steps # 2-3

Take a look at the post with the styled accordion. 

200719 Adv Accordion 011
200719 Adv Accordion 011

I hope you liked this tutorial. Thanks for reading!

If you liked this feature, you find enjoy other PublishPress Blocks features including the contact form block, table of contents, image slider block, testimonials display and count up block. You can even add lightboxes to galleries and videos.

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back in his homeland of Colombia. He spends his time translating from English and German to Spanish. He loves to learn about open source technology.

  • Steve Burge

    Steve is the founder of PublishPress. He's been working with open source software for over 20 years. Originally from the UK, he now lives in Sarasota in the USA. This profile is generated by the PublishPress Authors plugin.


  1. The “Advanced Accordion” is not to find in the Accordion settings! Where is it? I have version 2.4.1 installed an hour ago.

    1. Hi Ralph. We’re working a couple of issues related to WordPress 5.5. This could be one.

      Can I ask you to open a support ticket, please? That’s the quickest way to resolve bugs.

  2. If you stack accordian blocks, how do you specify which one you want to be open when the page loads? I have 5 stacked and the 5th block is the only one open by default. I’d like for the 4th block to be open by default when the page loads with the others collapsed.

  3. Hi Steve,
    currently only the first one is opened by default unless “Initially collapsed” is enabled. We’ll take note of your feedback.


Leave a Reply

Your email address will not be published. Required fields are marked *