How to add Accordions to WordPress

Accordions are such a useful component for any well-designed site. They help keep your content compact, but also organized.

You’ll frequently see accordions used in FAQ sections, but there are plenty of other uses depending on your design aesthetic and UI goals.

Skip to the answer: 3 methods to add accordions in WordPress

What is an Accordion?

An accordion is a type of content container that can show or hide content when you click it (similar to a spoiler or toggle). The typical configuration is several toggle components in a row, where only one is open at a time (opening the next toggle closes the previous one). These toggles combine to form an Accordion.

Example of an accordion:

Structure of an accordion

An accordion is a group of one or more content toggles, which expand or collapse when clicked.

Each accordion toggle consists of two parts:

1. Title – always visible, click it to show the content
2. Content – usually starts hidden. Displayed when the toggle is expanded

When to use an accordion (with examples)

There are lots of ways to use accordions or toggles. Here are some of the most common use-cases:

#1 To save space

Accordions are great when you want to fit as much content as you can above-the-fold, or otherwise compress the length of your page.

#2 To organize content

The Motortrend example above also highlights the organizational advantages of using accordions. I keeps the page clean, uncluttered, and easy to scan. Most of the sections of the page are accessible without scrolling.

#3 For Questions and Answers (such as FAQ)

FAQ’s are the classic use for Accordions, because their form factor fits so well. Typically the Question will be the title of the accordion block, and you can expand it if you want to see the answer. This combines the advantages of principles #1 and #2 above, because FAQ’s are both compact and well organized.

Most FAQ’s use the classic accordion style (when one toggle opens, another closes) because you rarely need to see the answer to two questions at once.

The FAQ section for Elementor Cloud is an excellent example of a classic accordion.

#4 Improve page speed

In some cases, using accordions can speed up your load times and even improve Pagespeed scores. That’s because the accordion content is initially hidden and can be lazy-loaded only if it’s expanded (if your plugin supports this feature).

#5 To add context or detail

When writing about a complex topic, I sometimes like to add extra content or detail for people who need it, without distracting other readers from my main point. Instead of linking to another page (or website) I often add a toggle or accordion with more information.

This keeps the main content scannable, while still helping readers who need a bit more help or information. It’s a win-win!

Methods to add accordions to WordPress

Currently, WordPress doesn’t include accordions as a default component or block, so you’ll need to add the functionality with an accordion plugin.

Which plugin to use depends on whether you’re still using the classic WYSIWYG editor, or the newer (and better) Gutenberg block editor.

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

1. Gutenberg Block: (best method) There are many excellent accordion and toggle blocks available and most are completely free. Most have visual styling controls and are fully customizable to fit your theme without needing custom CSS.
2. Shortcode: this is the ‘old-school’ WordPress method for adding special content or components via a plugin. Use this method if you still blog with the classic editor.
3. Page Builder: Popular page builders like Elementor, Beaver Builder, Blocksy and Divi all have accordion blocks, and even pre-built FAQ templates that you can just drop into a new page. These are best for static pages, but not standard blog posts.

Add Accordions with Gutenberg Blocks

Gutenberg blocks are the best way to add accordions to your site. There are several reasons I prefer this method to the other two:

Why use the accordion blocks?

1. Control: Visual customization of the accordion style
2. Lightweight: Most blocks load only the CSS and JS needed for that single block
3. Persistent: Blocks (usually) don’t break even when you delete the plugin
4. Reusable: Save your custom-designed accordions as reusable blocks for quick insertion

And these reasons, the new(ish) block editor is just a better tool (and better experience once you get the hang of it). If you’re ready to ditch the classic editor once and for all, watch this tutorial.

Recommended Plugins

Instead of standalone ‘accordion’ plugins, I recommend you use one (or more) of the fantastic free Gutenberg plugins that add multiple components to your site at once. For example, I used Kadence Blocks to create the accordions on this post, but there are several other choices, all 5-star rated in the plugin directory.

Here are the best options (not in order):

• Kadence Blocks – Multiple pre-defined styles and full control over colors and layouts. You can even put icons in the accordion heading and it’s a nestable block (group multiple blocks in the content of each accordion). Free version is fully functional.
• Stackable – Nestable Accordions, full control of styling. Includes one default style or you can import ‘pro’ styles if you upgrade. (demo)
• Ultimate Addons Gutenberg – The team behind Astra theme built this as a free gift to the WordPress community. With more than a dozen components (including accordions) it’s a fantastic plugin. The accordion block can even generate FAQ schema.
• Getwid – By Motopress, this plugin brings more than 40 blocks and components to your site. It’s a bit more bloated than above options, but loaded with features. (demo).

How to create an accordion with blocks

Once you’ve installed a plugin that includes accordion blocks, you’re ready to start adding them to your content.

1. Insert an accordion block

Click the ‘+’ icon in the editor to add a new block, then search for ‘accordion’ in the search field to quickly locate the right block.

2. Add the content

For each toggle in the accordion group, you need to set a title and create/edit the content that will be shown when the accordion is opened. Most accordion blocks are ‘nestable’ meaning you insert multiple Gutenberg blocks inside the content area of each toggle.

Repeat this process for each block in the accordion group

3. Tweak your settings

Choose whether you want any of the accordion panes to start in the ‘open’ position. Also select whether you can have multiple panes open at once, or each new pane closes the previous one.

4. Apply styling

To go beyond the default styles, use the block color and spacing settings to build a custom look. You can match your theme or emulate the design from another website you like.

Add accordions with Shortcodes

This is the older method to add custom custom components and code to your content. Shortcodes. You can use a plugin to visual design the accordion, which is then converted to a Shortcode an inserted into your post.

Advantages:

1. Shortcodes work with every version of WordPress and both editors.
2. There are accordion-specific plugins with their own shortcodes

Disadvantages:

1. The shortcode breaks if you delete the plugin
2. May load additional styles on your page
3. Can’t see what the accordion looks like on the back end

Recommended Plugins

It’s hard to go wrong with one of the all-time great WordPress plugins, Shortcodes Ultimate. It’s not an accordion-specific plugin, but rather a jack-of-all-trades with more than 50 shortcode-based components you can add to your site. And it’s free!

The built-in styles are pretty bland, but can be customized with a dated (but functional) visual editor. You can also add custom classes and do your own customization with CSS.

Other options:

• Lightweight Accordion – an super light plugin that does one thing and does it well. It loads less than 1kb of code, so your site stays blazing fast. No bulky stylesheets or slow JavaScript here. Includes both a Shortcode and Gutenberg block
• Helpie FAQ – If you specifically want to create FAQs, this is your tool
• Easy Accordion – This plugin has both free and pro versions, but the free version as enough features for most users.

Add Accordions with a page builder

Despite the improvements in Gutenberg, page builders aren’t going away anytime soon.

Elementor, Beaver Builder, Divi and Oxygen (to name a few) all include accordion toggles in their list of widgets.

A word of caution: If you care about site speed, I recommend using page builders only for static pages, not every blog post. For one-off designs, you can insert page builder templates inside a Gutenberg block, with a plugin like Elementor Blocks for Gutenberg.

How to add an accordion in Elementor

How to add an accordion with Divi

Best practices when using accordions

Design is subjective, but here are some guiding principles that will serve you well.

• User first – Make sure the accordion enhances (or at least doesn’t hurt) the user experience.
• Consistent design – Try to keep your accordion styles consistent between posts. If they look different on every page, it can give your website an amateurish look. You can use the ‘reusable blocks’ feature in Gutenberg to keep your styles identical.
• Mobile friendly – Make sure your accordions look good an are easily used on small screens. Also check to ensure the accordion content doesn’t get cut off or pushed off the screen on mobile devices.
• Less is more – Many of the older accordion plugins have presets that aren’t very modern (to put it nicely). Simple designs are often best, with just a splash of color to make it stick out on the page (or match your theme). Don’t go putting bubble backgrounds or flashing text on your accordion titles please.