One of the great things about using WordPress to create your website is the ease of adding cool visual effects! And the effect I am going to teach you about today is called an “Accordion.” Now, remember, the first and foremost focus of your website is the content and communication to your potential clients (providing useful information, marketing your business, creating a community, etc.) rather than just making it look pretty. However, there are some effects that not only are nifty, but also actually help create a great user experience.
For example, when you have a lot of content on your website, it can look a bit messy and unorganized when viewed on a small screen or mobile device. A good example of this would be a FAQ page. People typically visit your FAQ page to find an answer to their question, and you probably want to have a lot of information on that page to help them. However, if the FAQ is a simple long page that they have to spend time and scroll down, down, down… just to find the answer they are looking for, they might give up at some point and leave your site.
To solve that problem for better usability, I suggest that you consider using a function called an “Accordion.” It’s available as a plugin or in some modern themes.
(The “Divi” theme and its Magazine Style theme called Extra, (both my affiliate links) that I’m using for this website, both offer Accordion and Toggle fetaures, which you’ll see in the examples I share below.)
Accordion
An “Accordion” gives you a great way to display a lot of content in a limited space. Each Accordion item expands to display more content as you click on the plus sign. This allows users to see only the items they want to see.
Here is what Accordion items typically look like when first displayed on your site.
When you click on the second item, the second item opens up while the first item collapses.
By using an Accordion…
- you can maximize the space you have on your website.
- the content can be organized in a way that’s pleasing to the eyes.
- people click to see all the other answers
See why this can be great, especially for a page like your FAQ?
Difference between an “Accordion” and a “Toggle”
People often confuse “Accordion” with something called a “Toggle.”
In fact, a “Toggle” is pretty much same as an “Accordion,” with just one big difference. While each Toggle item collapses and expands just like an Accordion, a toggle allows multiple items to stay open at the same time.
When everything is closed, the toggle items below look the same as the Accordion items above.
But when you start opening each item by clicking on the plus sign to the right, each item opens up, and until you click on the minus signs, all open items STAY OPEN.
Once opened, each item will not collapse until you click on the minus sign to the right. Recall that you can open only one item at a time with Accordion?
I am using a Toggle Element on the FAQ Page of my Graphics Creation Workshop Program Enrollment Page. Go here to see that example.
Is Accordion better than Toggle or vice versa? It depends. You might want to use Toggle to let people open multiple items at the same time, or restrict how they can view the items by using Accordion. Just think which method would give your own website visitors a better experience before making a decision. It’s really just a personal preference.
Video on the Difference Between an “Accordion” and a “Toggle”
Watch this short video that visually shows you the difference I explained above in action!
5 Plugins to Create Accordions
If you don’t have a theme with an Accordion or Toggle built into it, you can simply add a plugin for that! Here are a few you may want to try out on your WordPress site. (Note that I have not used these plugins, but I found them and thought you might want to check them out for yourself)
1. Ultimate FAQ
Ultimate FAQ is a very customizable plugin that allows you to add an Accordion to your website with variety of styling options. This feature-rich plugin integrates with WooCommerce allowing you to have an FAQ section in your product page, lets you add a search function, and more.
2. Accordion
This plugin is super easy to use while offering very attractive designs. You can use its shortcodes to insert your Accordions anywhere on your site.
3. Easy Accordion
This one is another very intuitive Accordion plugin. Just by going though the steps presented in the plugin’s settings in the WordPresss admin panel, you’ll have your first Accordion in no time.
4. Accordion FAQ
Accordion FAQ plugin offers basic plugin features with simplicity. Its nice and clean designs can be easily jazzed up with different colors and Font Awesome icons.
5. Elementor Page Builder Plugin
Elementor is not specifically an Accordion plugin, instead it’s a very popular page builder plugin that includes an Accordion feature. If you don’t know what a Page Builder is, you can read my article here. You can also read more about the Elementor Plugin on their website here, or in WordPress.org’s plugin page here.
Toggle and Accordion in the Divi Theme
If you are using the Divi theme (my link for them), then this section is for you! It’s probably helpful to first know one more thing before using either an accordion or a toggle inside Divi.
Each Toggle item is actually a separate “module.” In the example above, “What is baking?,” “What is grilling?,” and “What is broiling?” are 3 separate modules, and that’s how each item can stay open or closed independent of other items.
An Accordion, on the other hand, groups all items in one module. Again using the example above, “What is baking?,” “What is grilling?,” and “What is broiling?” are all in one module.
Some examples of FAQ pages on live websites built with Divi can be viewed here. Get inspired!
If you are interested in the Divi theme or the Divi page builder plugin, check them out here. Another great page builder that also offers both an Accordion and a Toggle element is the Elementor Plugin. See above.
Are you already using an Accordion (or a toggle) on your WordPress website? I’d love to see that! Please share in the comment section below.
