Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Nested Accordion in Elementor

How to Display Nested Accordion in Elementor

Nested Accordion is a correlation between the child accordion and the parent accordion. Let’s see how to display Nested Accordion in Elementor 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.

Nested Accordion in Elementor template setup

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.

template for nested tabs

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

nested accordion 1 - BdThemes

Step-4: Then, insert WordPress Accordion Widget

Inserting wordpress 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

nested accordion 2 1 - BdThemes

Follow the flow Content tab > Accordion > and check all the controls for the Nested Accordion in Elementor.

Additional Section

nested accordion 3 - BdThemes

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

Making Parent Accordions

Step-1: First, insert Accordion widget.

nested parent accordion 1 - BdThemes

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.

nested parent accordion 2 - BdThemes

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



Styling

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

Child Accordion

Item

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

Title

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.

nested accordion style - BdThemes

Icon

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

nested accordion style 1 - BdThemes

Content

nested accordion style 2 - BdThemes

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 for the nested tabs.

Just, follow the screenshot below.

nested parent accordion style 1 - BdThemes

Video Assist

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

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.