How to Add Accordions in WordPress Block Editor

Have you like ever wished that your WordPress page could look cleaner while still packing in all the details your readers need? Then you’ll just need one thing for this and you’ll be all set, Accordions. It’s perfect for organizing FAQs, long tutorials, or simply filling in some details.

Now if you don’t know how to do any of it, you may have found a complete how-to on it. Go over each section, and I’m sure by the end of it you’ll be able to fold it like you’ve never done before. So let’s get right into it.

Why You Might Need to Add Accordions in WordPress Block Editor

What accordions are really good at is keeping your pages clean and ordered by hiding big chunks of content behind clickable headers. It is not just useful for FAQs and step-by-step guides, but it also ensures that your viewers get the information they need without endless scrolling.

They better the user experience, especially on mobile devices, by sparing some space and increasing readability. Accordions add some level of interaction to your website, leaving it more professional, engaging, and user-friendly.

How to Add Accordions in WordPress Block Editor

There are two different ways to add these in WordPress. You can use a plugin for that but the default Gutenberg editor will also get the job done; but very minimally. First, let me show you how that works.

Adding an Accordion Without a Plugin

Go to the WordPress post/page where you want to add an accordion, click the plus (+) sign, and then look for the ‘Details‘ block. Once found, insert the block.

Give your accordion a title and add the detailed content underneath the summary text. You can add almost any type of content in there, not just text.

You can further customize the accordion by clicking on the details block. Just navigate to the right-hand side panel and you’ll see options for customizing the typography, color, block spacing, border, and more. To add more accordions, repeat the process or simply copy the block.

Adding an Accordion With Ultimate Blocks Plugin

Now if the basic accordions are just not doing it for you and you want more advanced accordions, a good plugin will do it for you. And my recommendation is Ultimate Blocks.

So we will start by installing the plugin. To do so, we need to go to the WordPress Dashboard. Then we will go to Plugins and then Add New Plugin. Now search for Ultimate Blocks, click on Install Now, and then Activate it.

Now go to the WordPress post/page where you want to add an accordion. Then click on the plus (+) icon and type in ‘Content Toggle’ on the search box. Click on the block and insert it.

Your accordion should look something like this, add more accordion sections by clicking on the plus icon if you want.

Now add your accordion title to the panel title section and the main content to the panel content. Then, go to the right-hand side panel to customize the accordion.

The Style tab lets you add Color Scheme. Panel Title will allow you to specify the heading type for the title. Toggle State adds the Collapsed effect. FAQ Schema allows you to enable FAQ Schema. Toggle Status Icon lets you place the toggle icon.

That’s all; just preview the accordions before publishing the post or page, and you are good to go.

Conclusion

And that’s pretty much it, the A-Z of adding neat, functional accordions in the WordPress Block Editor. Now go ahead and fold, click, and take your site to the next level.

I hope this helped; if so, please take time to share. Thank you.