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.

---

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.

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

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

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. 

• 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.

• 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.

---

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.

• 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.

• 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. 

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.