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.
The “Advanced Accordion” is not to find in the Accordion settings! Where is it? I have version 2.4.1 installed an hour ago.
Edit: “… in the settings” I mean :-).
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.
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.
currently only the first one is opened by default unless “Initially collapsed” is enabled. We’ll take note of your feedback.
Is there no option to center an accordion title?
Hi Jay. If there’s not the alignment option you need, this can be done with CSS added to your theme.