How to Add an Accordion to a WordPress Site

Do you happen to be in the process of designing a landing page, a blog, a product description page, or even a page for frequently asked questions? If that is the case, you will definitely want to implement the Accordion plugin to your WordPress page as well.

Accordions might not seem like that big of a deal, but once you start using them, it becomes apparent just how much of a difference they actually make. There are quite a few benefits and even if you are not that good with the WP content management system, adding something like that should not be a problem.

There are plenty of sources on how to do that, namely this one on how to add an accordion in WordPress by HeroThemes guide. As for this article, it will mainly focus on the definitions and benefits. In other words, what everyone should know and why accordions should be on their website in the first place.

How to Add Accordion to WordPress

Amazing features are just a plugin or two away, so be sure to continue reading and finding out all the relevant information about accordions.

The Definition

Almost everyone should be familiar with accordions as a musical instrument. And there is a good reason why this particular thing is called the way it is.

Since all kinds of content need to be optimized in the best possible ways, accordions come in handy allowing you to organize multiple different sections in a way that they become easily accessible with just a few mouse clicks.

Collapsible tabs are what you see almost everywhere nowadays, and it helps immensely if you are dealing with loads of information but would like to keep everything on the same page and separate them into different sections.

How to Fix BreadcrumbList Structured Data Error (Genesis Themes)

FAQ Section


An FAQ page is a perfect example of great accordion usage. You ought to have seen this already on some websites when visiting their frequently asked questions pages.

Some sites like to have two layers, the first being the question and the second being the answer. Others add a third layer that is a section name, and once you click on that, a second tab with questions pop up. Clicking on either of those will show you the answers.

Back then, you would see horizontally tabbed accordions. However, things have changed and you hardly see them anymore. Modern accordion plugins do wonders for saving page space and making it so much easier for your visitors to navigate between information.

Toggle and Accordion

You may encounter the term “Toggle” and think that it is the same thing. While there are obvious similarities, the two are not identical.

For one thing, when someone clicks on an accordion heading, they do not get redirected to another page. Meanwhile, toggle closes the current viewing tab and opens a new one.

Sure, you can modify toggles so that the tabs do not close, but it is a bit of a pain and not something really worth the time when you have accordions ready. An example of an Accordion can be found on this page (where you have Tecno F7, N7, etc.).

Why Should One Use an Accordion?

Why Should One Use an AccordionWhenever someone is thinking about using something, the first thing to look at is the advantages and disadvantages. The latter is pretty much non-existent so there is no need to even mention them. Instead, let us take a closer look at all the things that make accordions awesome.

How to add robots.txt to WordPress without Using a plugin

Saving You That Space

Minimalism is one of those things that you see embraced in all aspects of life, website design included. It is so much easier on the eye. And if you were to look at some of the websites, you would definitely find ones that have pages with endless scrolling. Such a design is not great.

It would not be a stretch to say that saving space is the biggest advantage of accordions. Instead of filling the pages with vast amounts of information, put them behind tabs and let users enjoy well-developed pages that are easy to comprehend.

Content Organization

Accordions also give a sense of organization since it becomes so much easier to find information. Contents that are organized in an accordion is visible at a glance, giving your readers the user-friendliness that’s required of every modern website.

Embed Them Anywhere

There are no limits as you can embed accordions anywhere on the website giving you free rein of customization. For instance, if you want to add some valuable info on a particular page without taking up the majority of its space, accordion is the obvious choice.

Loading Speed

Improve WP Loading SpeedImage source:

The less information a page has to process, the faster it will load. Loading times are crucial for SEO, bounce rate, and visitor retention. So whenever there is an opportunity to raise these metrics, one should always take advantage of that.

How to Add an Accordion to a WordPress Website in 2020

Unlike before, it is now fairly easy to add accordion or FAQ to any WordPress website. While Yoast SEO can be used for FAQ functionality, Shortcodes by Angie Makes, Easy Accordion, and Shortcodes Ultimate can be used for the WordPress accordion functionality.

How to add Numeric Pagination to Mobilepress without Using any Plugin

Once any of these plugins are installed, the accordion or toggle functionalities can be used to organize and beautify contents for easy viewing/interactions.

In conclusion:

It should become apparent what accordions are all about and why you need to put them to better use on your website as well. If you have not done this, be sure to do it. Otherwise, you will continue to miss out on a lot of neat features.

Previous ItemTop Considerations for Selecting a Learning Management System
Next Item10 Best Places to Get Custom Designs for your Site and SM Pages
3ptechies Team
Team 3ptechies is a legion of tech apostles who are gadgets freak, tech enthusiasts, and lover of modern techs. Note: Our words are ours and as such doesn't represent the opinion of 3rd Planet Techies.


Please enter your comment!
Please enter your name here