How to Add an Accordion in WordPress (With/out a Plugin)

An accordion is a collapsible web element or content section that holds large amounts of information in a limited space. When you click on the accordion, it expands and showcases the information in a more organized way.

When adding accordions in WordPress, you can use the native ‘Details’ block or an accordion block plugin. The details block can be used for simple accordions, but you need to use a plugin if you want to add advanced accordions.

Several accordion plugins are available. In this post, we will use the Ultimate Blocks plugin. It has a Content Toggle (Accordion) block that lets you add content in accordions.

Ultimate Blocks

Now, let’s start with the plugin-free option.

Adding an Accordion Without a Plugin

Follow these simple steps to add an accordion to your WordPress post/pages without using a plugin.

Step 1: Insert the Details Block

First, go to the WordPress post/page where you want to add the accordion. Then click the + icon and search for the ‘Details’ block. Click on it to insert it.

Step 2: Add Content to the Details Block

Give a name to your accordion and add the detailed content under the summary text. You can add any type of content there.

Step 3: Customize the Details Block

Select the details block, and you can customize color, typography, block spacing, and border from the right-hand side options panel.

Follow the same steps to add another accordion. You can also duplicate the block.

Adding an Accordion With Ultimate Blocks Plugin

Now let’s see how to add an advanced accordion using the Ultimate Blocks plugin.

Step 1: Install the Ultimate Blocks Plugin

At first, go to your WordPress Dashboard and head over to Plugins (1) > Add New (2). Then search for ‘Ultimate Blocks’ (3). And then install and activate (4) the plugin.

Install and Activate the Ultimate Blocks Plugin

Step 02: Insert the Content Toggle Block

Now go to the WordPress post or page where you want to add an accordion. Then click on the Plus (+) icon and type ‘Content Toggle’ on the search box. And click on the ‘Content Toggle’ block.

Add the Content Toggle Block to Your Post or Page

You’ll see the accordion added vertically on the post or page. You can add more accordion sections by clicking the plus (+) icon.

Then add accordion title in Panel Title and main content in Panel content

Insert New Toggle

From the right sidebar, you’ll get options to customize the accordions.

  • Style tab will let you add Color Scheme.
  • Panel Title will allow you to set the Heading type to the title.
  • Toggle State gives the option to add the Collapsed effect.
  • FAQ Schema lets you Enable FAQ Schema.
  • Toggle Status Icon allows you to place the Toggle icon.

You can see we have customized the accordion by adding color effects and enabling the collapse option.

Step 03: Preview the Accordion from the Frontend

Now go to the preview mode of the page. Check if the collapsing button works. Hope everything will work fine.

Visit this link to unfold how to create a nested (multi-level) accordion in WordPress.


Can I add multiple accordions on the same page?

How can I style the accordions to match my website’s design?

Does using accordions affect SEO?


Before we end the discussion, accordions can be a helpful way to improve your SEO score. So while writing questions and answer, better if you add focus and LSI keywords in the write-up. Enabling FAQ Schema can add a plus point to it as well.

While customizing the appearance, make sure to add the color pallet that represents the brand color of your website. The Content Toggle block of the plugin will let you do everything intuitively.

Comment us below if you have any more questions yet to be answered.

Also Read:

Leave a Reply

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

Get the Best Blocks Plugin at 20% OFF!

Need help?