How to add WordPress accordion blocks for collapsible text for free

A WordPress accordion block helps organize your website content and ensures a better user experience.

An accordion block is a page element where you select the header and a content area slides open. You’ll often find them on product and service pages or in FAQs sections of websites.

Here is an example of an accordion layout.

Websites often use the accordion block feature for FAQ sections.

Adding FAQs helps users by answering common questions and overcoming objections by addressing any blockers.

Using this feature, your content could appear in the People Also Ask section on Google search results. This can help clickthrough rates and positively impact your website SEO. That’s why they are so popular!

But how can you add this functional web design element to your WordPress website? What are the right tools to get the best out of this amazing feature?

What is a WordPress accordion block?

WordPress accordion blocks allow you to create collapsible text items or menus. Usually, they come with a list of titles stacked on top of one another.

When you click the title, it expands the hidden text under the related title.

It’s a simple way of including as much information as you need on a page without overloading the design or creating a wall of text.

What advantages do accordion blocks offer?

An accordion block improves your website user experience, especially on small devices like mobiles or tablets. They are an excellent way to include lots of information within a small space while keeping everything manageable.

They can also reduce unnecessary website loading time, boost website performance and reduce the bounce rate.

You can also use this modern website in different places of your website for serving multiple purposes.

We’ll discuss the different use cases of WordPress accordion block later in our article.

How to add an accordion dropdown to your WordPress website

Now it’s time to dive into the main part of the article on how to add an accordion dropdown using Gutenberg blocks.

Follow the below steps to complete the process:

• Step 1: Install Spectra
• Step 2: Add Spectra Gutenberg accordion block

Let’s get started.

Step 1: Install Spectra

The WordPress block editor doesn’t come with an accordion block by default. So you need to go with third party plugins to implement the features to your website.

When you talk about Gutenberg block plugins, Spectra is at the top of the list. It’s an advanced page builder ideal for designing websites using Gutenberg blocks. It’s also free, which is a definite bonus!

Let’s install the plugin.

Navigate to Plugins > Add New.

Type Spectra into the right side search bar. Then hit the Install button.

Finally, click the Activate button.

You’ve successfully installed and activated the plugin on your website!

Step 2: Add the Spectra accordion block

First, open the page in the WordPress default editor panel and go to the suitable area where you want to add the accordion block.

Now find the Spectra FAQ block and drag and drop it to the right area on your page.

If you want to add more child FAQs, you can click the ‘+’ icon on the bottom.

Now, change the title and inner text based on your needs and hit the Update button.

Let’s see how it looks.

Where to use the Accordion dropdown block

A blog post or web page are the most common places people use an accordion menu. However, you can implement this feature in other areas of your website.

You can use this feature on your website service page to share services to related information in a short form.

Use accordions on product pages to answer common questions and for objection handling.

Another great place to use the accordion block is to display your pricing plan. Different services offer different pricing plans. Using an accordion block, you can efficiently design a pricing page.

You can also consider creating an accordion menu to display your team members. For example, you have a dental website where dentists offer different services for their patients.

With the help of the accordion block, you can showcase dentists and their service related information in a more organized way.

You might see the use of accordions in an online course related website where they share the course content using this website design feature. You can also find this web element in a restaurant website to share food menus or recipes or to provide specific dietary information.

Best WordPress accordion plugins

There are many accordion plugins in the market. We’ve picked the three best accordion WordPress plugins for you to try.

1. Spectra

Spectra is a popular page builder plugin trusted by over 400,000 users. This plugin is the best option for those who want to build their website using only Gutenberg blocks.

It comes with 27+ advanced blocks and 100+ readymade website templates that allow you to make websites in minutes without coding skills.

Key features

• Flexbox containers
• 40 + preset block templates
• Super fast load times
• Built in SEO features
• Local Google fonts loading
• And a whole lot more…

The plugin is fully customizable and compatible with popular WordPress themes. The good news is that it’s free too!.

2. Accordion FAQ

Accordion FAQ is a popular plugin allowing you to easily add accordion blocks to your WordPress website.

This plugin comes in two different versions free and premium. With the free version, you can add responsive FAQs to your website and decorate the content using unlimited colors.

Key features

• Responsive design
• Offer advanced custom field
• Uses the Bootstrap framework
• Font Awesome icon support
• Integrate with the shortcodes

It also offers a couple of styles integration and drag and drop accordion builder. You can use Font Awesome icons to make the accordion block more catchy.

If you upgrade the plugin from free to premium, you’ll get some advanced features like design templates, background overlay, content animations and more.

3. Easy Accordion

Easy Accordion is a good plugin for creating a customizable collapsible table in WordPress. This handy tool has many modern features that help you create an accordion menu in WordPress for free.

However, you can add custom CSS code and change the accordion title background color.

Key features

• Intuitive admin dashboard
• Add & remove the accordion item from the admin area
• Lightweight and responsive design layout
• Custom CSS field to override styles
• Translation and RTL compatibility

This amazing plugin is also compatible with popular WordPress themes. You can add SEO friendly FAQs to your website and improve your ranking.

Wrapping up

Adding an accordion feature to your website enables you to add lots of content to pages without overloading your audience. You leave it up to them to read more or not while still offering the content they look for.

In this tutorial, we’ve shown how to add WordPress accordion blocks using our awesome free Spectra page builder.

Spectra makes it simple to add accordions and design them how you like. There’s no easier way to add accordion blocks to web pages and we thoroughly recommend it!

Do you use accordions on your website? What information do you typically use them for? Have any tips for new users? Tell us your story below!