How to Display Nested Accordion

How to Display Nested Accordion

Nested Accordion is a correlation between the child accordion and the parent accordion. Here I’ll include step by step instructions to help you get started to display Nested Accordion using our Accordion widget.

Making Child Accordions

Step-1: At first, you’ve to make a child accrodions and to do that, go to WordPress Dashboard > Templates > click on the Add New.

Step-2:NEW TEMPLATE pop-up will arrive. Then, select Section (from the drop-down) > and give a template name (such as Nested Accordion in Accordion) > hit the CREATE TEMPLATE button.

Step-3: Next, edit the template in Elementor editor.

Step-4: Then, insert Accordion Widget

  • When you’ll insert the Accordion Widget, you’ll be provided two sections Accordion and Additional under the Content Tab.
  • Go to the sections and edit them all. Keep your eyes through the screenshot below.

Accordion Section

Follow the flow Content tab > Accordion > and check all the controls.

Additional Section

Try it and go to the Content tab > Additional > and check all the controls.

Making Parent Accordions

Step-1: First, insert Accordion widget.

Step-2: Go to the Accordion and hit your any desire accordion itmes (Accordion#1) > Select Source > Elementor Template > Update > Reload (if not shown) > Select Template > Nested Accordion in Accordion( created before under Templates). Now, it is done.

Step-3: Following the steps mentioned above, you can set the nested accordion under every single accordion(Accordion#2, Accordion#3).


To style the nested accordion, you’ve to style the child accordion and parent accordion separately.

Child Accordion


Here, you’ll be able to set alignment and spacing of the accordion item.


In terms of the Normal and Active mode, this section will let you go to add Background Color and Image, Text Color, Box Shadow, etc.

But, in the Hover mode, you’ll be able to add Background Color and Image and Text Color.


In this section, you’ll be allowed to set the icon position, color, and spacing.


Go to Style tab > Content > and manipulate all the controls.

Parent Accordion

When you’re going to style the Parent Accordion, you should follow the same things as I’ve mentioned in the matter of Child Accordion.

Just, follow the screenshot below.

Video Assist

To sum up, I think you’ve realized that it is a little bit tricky to make a nested accordion in the Elementor. And also hope that this article will come with usefulness to you. Watch Video Assist and visit the demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.