How to Show Content in an Accordion with the Gutenberg Editor

Accordions

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.


Step #1. Install the Advanced Gutenberg 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 Advanced Gutenberg 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 Advanced Gutenberg 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!


Comments (3)

Leave a Reply

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

Professional publishing plugins for WordPress! Get PublishPress