Legit Method

Easily Add Accordion To WordPress: With & Without Plugin


Add Accordions To WordPress
Add Accordion To WordPress
At no extra cost to you, we may earn affiliate commission if you buy through links on this post.

If you are looking for how to add Accordion to WordPress, which will help you to design a beautiful landing page, a good product description page, or a FAQ page on your website. 

If you want to do any of this, you need to add and use accordion in your page designs.

WordPress accordion is very important in website designing, it helps to make websites easier to explore and helps improve users’ experience and ease to navigate the website. 

Accordions are used for various reasons, including helping reduce clutter and extra-long web pages. 

With a good WordPress accordion plugin, it will help you rank higher on Google, most of them are very easy to use, and some use the drag and drop button which makes it very easy for just anyone to use. 

It equally helps to shorten your page length, which helps your reader read faster, engage more in your article and share with their friends. We will discuss this in a detailed letter in this article. 

In this article, we will walk you through the entire process of how to add Accordion to WordPress, Accordion WordPress without a plugin, and also Accordion with a plugin.

But first, we must have an in-depth understanding of what an accordion is

What Is An Accordion? 

When using a WordPress website, most times you encounter the difficulties of having multiple sections on your website which may be confusing to you. 

An accordion is a very important and useful design strategy that helps you circumvent this, by organizing multiple sections of content in a single place.

To put it in simple terms, accordion is a tool that allows you to create a single section with collapsible tabs on your page designs, which helps you to pack lots of your contents into one section, for easy identification and usage. 

For instance, if you’re trying to design a frequently asked questions section on your website, you can use WordPress accordion to easily and neatly organize the questions and answers.

This makes your page clear, neat, easy to read, and understandable. Pages such as this, attract many readers. 

Using this feature in designing your frequently asked questions side allows you to show only the questions and hide the answers in the collapsible accordion you’ve created.

When you search through google, you will see most of this and you will understand that it helps make your article or page easy to navigate. 

This feature equally allows you to save space on your page design and offer you an easier and more effective way for users to explore answers. 

Many years ago, a lot of websites used horizontally tabbed accordion, which isn’t as easy and effective as the one used today, that’s to show you how much modification the internet world has gone through, but in today’s world, a lot has changed and people are constantly finding ways to make it easier for users. 

Difference Between Accordion And Toggle 

Stay tuned to this section of this article, this is very important, most people are at a loss for the difference between WordPress accordion and toggle, they have been often used interchangeably, in as much as they look similar, they are different in many ways. 

To further elaborate on these differences, when a user clicks on a WordPress accordion heading, he or she views the content in its tab without the tab closing itself. But when users click on other headings, the previous tab closes to open the new tab.

This is a very clear-cut difference. With toggles, you can modify and change this behavior to keep the tab open and allow your users to close the tab manually at will. 

The WordPress accordion can only keep a tab opened at a time, with toggles, you can adjust to view multiple tabs that are opened at a time. This is a very clear-cut difference between the two. Having said this, we believe you can now differentiate the two when seen. Let’s discuss some of the benefits of using accordions. 

Benefits Of WordPress accordion

As you’re well aware, there are many benefits of WordPress accordion and many reasons why you should use them on your blogs.

Here, we will list some of the benefits of accordions, stay tuned. 

1. Saves lots of space 

You must have visited some web pages a long time ago that make you keep scrolling down forever to find the specific content you’re looking for.

Those types of pages are pages without accordions. WordPress accordions have helped solve this problem, one of the main importance of using accordions in your website is the ability to save space on your website.

Instead of elongating your webpage, you can easily hide all the important information behind tabs using accordions. This helps users to find questions and answers by looking through the headings. It makes it easier for users to navigate, and faster for them to read through your page. 

2. Better content organization 

If you ever want to organize your content, in a way your users will find it easier to use, you have to use accordions.

With accordions, you can organize your content under different categories and topics. When your page is organized like this, it looks more neat and beautiful, pages such as this attract lots of readers. 

3. Added anywhere 

Another very important thing about accordion is that it can be added anywhere on your website. 

For instance, you can add FAQs accordion sections on your pricing page or your product landing page, which helps to better organize your content and make it presentable to your users. 

This beautiful feature allows you to answer common questions about your product without having to take up too much space.

4. Helps reduce page size

The size of your web page has a role to play in determining the speed of your page loading. The speed of your page loading goes a long way to determining its ranking on Google. 

When using accordions on your website, you can greatly improve the loading speed of your website, which in turn improves its ranking on Google. Accordions are embedded as a widget which makes them easy to use. 

How To Add Accordion To WordPress With Plugins

One of the first things you need to do before adding a WordPress accordion plugin to your website is that you have to choose a good one. 

There are several plugins available out there but for this article, we will be using one of the most popular types called “Accordion”

The benefit of the accordion plugin is that it gives you a faster and easier way to create any type of accordion you want which includes

  • Tabs
  • Tabs content
  • FAQ
  • Knowledge-Based
  • Questions and answer section 

Moreover, this type of plugin is very compatible with WooCommerce, it is also very easy to customize, and mobile friendly. It comes with different features, which include changing colors, don’t sizes, and icons. 

The bottom line is that you can build each accordion how you want and use the shortcodes to display it on posts, pages, and different areas of your websites. 

1. Install and activate the accordion plugin

One of the first things you need to do is to install and activate the WordPress accordion plugin on your site. 

There are many ways to do this, but the best way is by going to the plugin repository page in the administrators’ area of your WordPress dashboard.

Once you have installed the plugin and activated it, click on the Accordions > settings and take a look at the settings page 

The WordPress accordion plugin settings are very straightforward, you can easily pick your font version and export or import the JSON files if and when needed. 

 2. Building an Accordion

To build your first accordion, you need to click on accordions > new accordions. From here you will set and build any accordions. 

While on the page titled “New Accordion “, you will notice a few things.  One of the best and the first thing you need to do is to give your accordion a title, this way you can easily reference it moving forward.

Below the title, you are going to see 5 diverse tabs. You will use those tabs to build and create from the WordPress accordion plugin. Some of these tabs include. 

  • Options
  • Styles
  • Shortcode
  • Contents
  • Custom scripts

Navigate through the options to first familiarize yourself with them, then you can use them to build the accordion you want. 

P:S: When You scroll down to the bottom of this page, you will observe that as you develop the WordPress accordion, you will see a preview of it in real-time.

You can easily click on the different tabs to see how it will appear on different devices, this is located under ” preview’. let’s discuss some of the accordion plugin options

3. Accordion Plugin Options 

  • Shortcodes: click on the short bar icon containing the shortcodes, and you will the shortcodes available
  • Options: Now click on the “Options” icon and start using and importing out all the settings according to the way you would like them to appear.
  • Style: The next is the style tab, click on it, and on the settings, you can adjust them to appear the way you would love them to appear. This is where you can add a touch of uniqueness to yours.
  • Content: This is where you add all the content you would love to be displayed in this particular section. Click on the content tab and the add button, and a small mini WordPress editor will pop up. This allows you to add any type of content you wish to add, make changes or delete at will. You can repeat this process as many times as you want till you get what you’re looking for.
  • Custom scripts: Lastly, click on the tab on the custom script, in this area, you can add unique kinds of stuff like custom CSS and JSON if you choose.

Once you are done with all these steps and you love what you see, and you’re sure you’ve gotten them right, then you click on the publish button and the WordPress accordion will be published.

If you want it to be displayed in any area of your choice, you need to take the shortcode that is generated and place it in the area of your choice, then it will be displayed. 

You can repeat the process above as many times as you want to build as many different types of accordions as you wish for your WordPress website.  Let’s take a look at other WordPress Accordion Plugin options

4. Other WordPress Accordion Plugin 

There are many other types of WordPress accordion plugin options, we choose to use the accordion plugin for this article because it offers users a ton of different functionality and it is user-friendly.

If you want to try something different, there are several good WordPress accordion plugins available. 

1. Accordion FAQ

This is a unique type of plugin, it is a solid, mobile-ready, and responsive WordPress accordion plugin, that anyone can use to build and add different unlimited collapsible elements to your word press website.

This plugin comes in handy if you want to add different unique features to your website. Some of its features are widely known:  

  • Responsive Design: This design is very easy to use and with it, you can add limitless accordions anywhere in the theme. All you need to do is to make use of the drag-and-drop builder that uses API integration. You can equally use the shortcodes, it has unlimited color options which will make your design more beautiful 

2. Tabs – Responsive Tabs With Accordions 

This is a very unique type of WordPress plugin with so many great features. It is a fully visual composer extension with a responsive tab builder plugin built into it. 

If you are a visual composer on your website, this is a great and important plugin to install as well. It will aid you in your work and make your WordPress website easy to read and easy to navigate. 

It has some unique features which include

  • Fully live design
  • Different custom interface
  • Different styles and layout
  • Mobile Editing
  • SEO friendly features
  • Ecommcer compatibility
  • Custom CSS available 

3. Easy Accordion 

If you’re looking for a good word press plugin that mostly uses the drag and Drop button then this is the best one for you. 

It comes with ready-to-use customization options that are available to help you build and make your website more engaging and load faster, which in turn makes it rank higher on Google ranking position. 

You can quickly and easily use and implement different types of accordion styles into your websites without having to write any single code.

This means that anyone can easily use this type of plugin option. It has a lot of great features too, which will help you build a well-optimized blog, some of the features are

  • Mobile ready and responsive, this means you can use it on your mobile phone if you don’t have a laptop. 
  • Outstanding and clean admin panel from which you can make important changes and delete anything you don’t find useful
  • Fast, this plugin is incredibly fast, with each move you make, it responds immediately with speed, which makes your work faster and more enjoyable. 
  • With this plugin you can create unlimited multiple accordions on the same page, this is very useful to reduce your page length and differentiate your article into different categories.
  • WP classic editor, which comes in handy when trying to edit things on your WordPress sites.
  • Drag-and-drop accordion sorting makes it easy for anyone at all to use, with or without prior computer knowledge 

This shows that when you are at liberty to test different plugins you should consider this easy accordion, it has great features you will find interesting to use, to boost the overall performance of your website, and make it easier for your readers to navigate. 

How to add Accordion to WordPress without plugins

One of the disadvantages of blogging is the ability to add features without plugins, it usually consumes a lot of time and energy, and most times you won’t get it correct if you can’t find it on the internet.

One of these is adding accordion WordPress without plugins and just with lines of HTML or CSS codes.

However, to add accordion WordPress without a plugin, you must be an already user of page builders such as Elementor.

Recently, WordPress doesn’t offer accordions as a default feature or block, so if you want to add accordion WordPress without a plugin, you need to add additional functionality with page builder, Gutenberg block, or shortcodes.

This way, you don’t need to use any WordPress accordion plugin, but another plugin with different functionalities other than Accordion alone.

Here are the most common ways to add an accordion to your posts or pages without an accordion plugin:

  1. Gutenberg Block:  Using the Gutenberg Block is the best method because there are a lot of nice accordion and toggle blocks available and most of them are free.
  2. Shortcode: If you still blog with the old WordPress editor, this method will serve you right. It is the ‘old-school’ WordPress way of inserting special content or components into the post or page.
  3. Page Builder: If you are already using popular page builders such as Elementor, Beaver Builder, Blocks, and Divi, all these mentioned page builders have accordion blocks and even pre-built FAQ templates that easily use on a new page. Using the page builder is usually best for static pages, but not nice for regular blog posts.



We believe by now you would attest to the fact that this is one of the best articles you’ve read on how to add accordion to WordPress with or without plugins.

This article will be of great benefit to you if you can read it through again, to understand the step-by-step process of how you can easily utilize plugins to boost the overall performance of your WordPress website.

Feel free to share this article with your friends, and don’t forget to comment your thoughts in the comment section. 

Leave a Comment

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