How to Create State of the Art WordPress Accordions

WordPress accordions

User control and freedom: this is one of Jakob Nielsen’s 10 general principles for interaction design.

Website accordions allow users to achieve just that: choice and freedom. 

Accordions are collapsible vertical menus that contain a list of headers that can be clicked to hide or unhide content associated with them.  They give users the choice to read or ignore the content in front of them.


How do website accordions work?

Let’s look a bit at the anatomy of an accordion. WordPress accordions or any other website accordions contain (according to Smashing Magazine):

  • A category title
  • An expanded and a collapsed state
  • An icon indicating expansion

Once the category is expanded, the icon should change to indicate collapsing. Now, the designer should figure out what to do if a category’s content is collapsed. Will it stay this way if another category gets collapsed as well? 

Let’s look a bit at how Slack is using accordions. The icon will change direction when clicked, and all categories stay collapsed until they are clicked back into the initial non-collapsed state.

Slack is using accordions


The main benefits of using WordPress accordions

Now, let’s see why accordions can be a great choice in web design.

  • Accordions offer freedom, choice & control for the end-user. This means that you’ll provide a good user experience.
  • If you need to shorten a page, an accordion will be your user-friendly option.
  • If you want to save your user from neverending scrolling, you can display your content inside accordions.
  • Accordions can be a better alternative to within-page links, which can be pretty nasty. Loading new pages might confuse the user and they might forget how they ended up there in the first place. 

This means that you can use accordions with tabbed text inside. When users click on the tab, its content will reveal to them.

One thing you should know about is the fact that relevance beats long content. This means that if the content is really useful for the end-user, you can avoid accordions. You might end up annoying the website visitor if he will need to click lots of headers. 

Also, if your pages are extremely long, if an accordion will make use of too many tabs, it will also ruin the overall experience. Try creating more pages (if enough content for them).


Common use cases for WordPress accordions

Accordions are most commonly used in the design of FAQ pages (frequently asked questions) by displaying questions as tabs. 

tesco accordion FAQ


Heineken product FAQ accordion


You can also present processes (eg: installing a SaaS product), upcoming events, jobs, features of a product, product reviews. There are multiple options out there. But always bear in mind this: relevance trumps accordions. 


How to add WordPress accordions on your website

Now that we figured out where and how to use accordions, it’s time to build one.

Adding WordPress accordions using page builders

There are lots of free WordPress themes out there. The thing is that most of them do not include accordions in their free plans. You will most probably need a Pro theme. This is why we will be using the Colibri PRO theme and the Colibri builder for this exercise. In less than 3 minutes we’ll have our accordion ready.

  • First, start by customizing your desired page from the WordPress dashboard.customize WordPress page
  • Next, from the left-hand side panel, select the “+” button. It will open up a window with blocks and components. From the components panel, select “Accordion” and drag it to your website on the right-hand side.

WordPress accordion in Colibri

If you want to delete the accordion, just select the whole section and hit “delete” from the keyboard. 

The cool thing about this builder is that all the components will match the theme’s styling.

  • Now, if you need to style more, you can do it from the left-hand side menu. You can adjust: size and spacing, colors and typography, icons styling, borders, shadows, backgrounds, assign CSS classes, IDs and add custom CSS

and more.

Styling WordPress accordions using page builders

There’s an option that allows multiple items to stay open, under the “Content” menu.

There’s so much flexibility that you won’t be needing any other tool.


The accordion will be responsive by default, so you can get this worry off your chest.


Adding WordPress accordions using plugins

Now, if you’re a plugins fan, here’s how you can create a WordPress accordion:

  1. Choose your plugin (I’m recommending bellow 3 popular WordPress accordion plugins)
  2. Install and activate your plugin: details in the tutorial below.

  3. Set up your accordion

  4. Publish your page


It’s all that easy.

The plugins that I recommend are:


Easy Accordion Pro

Having more than 10k installs, this plugins comes jam-packed with features:

  • It works by drag and drop
  • It is responsive
  • Clean and intuitive admin panel
  • It is shortcode-ready
  • Unlimited color options
  • It has activator events based on click or mouseover

and more.

Here’s a short demo to see how intuitive it is:

After activating the plugin, look for the “Easy Accordion” menu on your WordPress admin panel. Select “Add New” from the menu and you will find an Accordion Content input field and Shortcode Generator Settings panel. Now, it’s up to you to customize everything. After setting up your accordion and hitting publish, you will receive a shortcode in the bottom section. Next, you just have to copy-paste the shortcode on your desired page.


Accordion by PickPlugins

accordion plugin

This plugin is used by 30k+ active WordPress users. The accordions are displayed via shortcodes, an option that I really love whenever I encounter it.

The plugin allows you to set up unlimited accordions and add them to your pages, FAQs, posts, or any other website area.

The Pro plans allow for:

  • Vertical tabs
  • Multilevel and nested WordPress accordions
  • The option to click the header to scroll top
  • Header text toggling
  • Updates and support 


Accordion FAQ

accordion faq

Let’s check a bit the most important features of the free plan:

  • Mobile-friendly
  • Limitless accordions anywhere on the website
  • Drag and Drop builder API integrated
  • Shortcode-ready
  • Font Awesome icon support
  • Testimonial builder


If you need some more advanced features, here are some important paid features available in the PRO plan:

  • Responsive design
  • 8 design templates
  • 500+ Google Fonts
  • 12 open/close icons set
  • 30+ content animation


Now, because these 3 plugins are using shortcodes to deploy accordions, there’s another plugin I totally recommend, that will give you some extra features as well.

Meet: Shortcodes Ultimate

This plugin is the mother of all shortcodes, really now!

Just look at the examples below:

Accordion shortcode

So, it will spare you from lots of headaches. I’m definitely in for this plugin!


Accordions can be an option for avoiding neverending page scrolls. BUT, if the content is relevant to your website visitors, it’s better to show all the content at once. People skim a lot, and clicking tabs doesn’t help with that. 

The folks at Nielsen did an eye-tracking study that showed that people do scroll till the end of a page if the content provides them with real value and is properly formatted for scanning.  

You need to balance things out. If you’re not sure if an accordion is a right choice, you can always AB test, if enough sample size.

As per the technical side of WordPress accordions, there’s nothing fancy to worry about. You can always choose a theme that has the accordion feature, or go with a page builder or a plugin. 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!


[sibwp_form id=1]

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.


How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]