How To Create A Nested Accordion In WordPress (Step-by-Step)

Accordions are handy UI elements that help organize content in a compact, clickable format. They’re especially popular for FAQ sections, where users can expand only the answers they need.

But what if you want to go one step further? That’s where nested accordions come in. They allow you to place one accordion inside another, perfect for layered information like product specs, documentation, tutorials, and more.

In this quick tutorial, you’ll learn how to easily create a nested accordion in WordPress using the Ultimate Blocks plugin.

Let’s get started.

How To Create A Nested Accordion In WordPress

Step 1: Install & Activate the Ultimate Blocks Plugin

To create nested accordions, we’ll use the Content Toggle block from Ultimate Blocks. It’s a free plugin that adds several useful blocks to the WordPress editor.

Go to your WordPress Dashboard.
Navigate to Plugins → Add New.
Search for Ultimate Blocks.
Click Install Now and then Activate.

Step 2: Add the First Accordion (Content Toggle Block)

Now, open the post or page where you want to add your accordion.

Click the (+) icon and search for Content Toggle. (Alternatively, you can add it by typing /content toggle)
Add the block to your content.

Then give it a title.

Step 3: Add a Nested Accordion Inside the First One

Here’s the fun part — we’ll now add an accordion within the existing one.

Click on the downward arrow sign and open the accordion.
Inside the accordion, click the (+) icon.
Add another Content Toggle block.

Give this inner accordion a title as well.

Congratulations! You’ve created a nested accordion. You can add more accordions by clicking on the (+) icon.

Step 4: Repeat the Process for More Nesting

To add another accordion, click on the (+) icon under the first accordion.

You can repeat the same process to add more nested accordions as needed. Just keep adding Content Toggle blocks within others and structure them however you like.

Step 5: Customize the Accordion Appearance

Ultimate Blocks makes it easy to style your accordions.

Select a Content Toggle block.
From the right-hand side panel, adjust:
- Toggle icon
- Font size and color
- Border and spacing
Switch to the Styles tab for more design options.

Once you’ve created and styled your nested accordion, preview the page to ensure everything looks perfect across devices.

Conclusion

That’s it — now you know how to create a nested accordion in WordPress using Ultimate Blocks.

It’s a great way to present detailed information in a clean, collapsible format. Whether you’re working on FAQs, course content, or documentation, this layered structure keeps everything neat and user-friendly.

👉 Want to explore more accordion plugins? Check this out.