Table Of Contents

Accordion widget

How to Use Accordion Widget

The accordion widget is a graphical control element. The important thing is that it comprises a vertically stacked list of items, such as labels or thumbnails. It is collapsible and extendable to reveal the content associated with that item.

Here, I’ll give you some instructions on the basis of sections and pictures detailed to help you get started.

So, let’s know how to use Accordion Widget by Element pack.

To Insert Widget

inserting the Elementor Accordion widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.

Content Tab

Using the Content tab, you’ll be able to make a layout of a particular part (such as Accordion) of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the HTML accordion.


Accordion Items

Wordpress accordion items

Step-1: After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group by just clicking on the ADD ITEM button to increase the html accordion.

single accordion widget controls

Step-2: You can edit every single list item. Simply, Go to the Accordion and hit your any desire accordion items (Accordion#1) > Title & Content > Title HTML Tag > Icon > Active Icon.

Step-3: With the Custom source, you can select two more sources like Elementor Template and AE Template.

nested Elementor Accordion widget

For example, go to Select Source > select Elementor Template > Select Template > Nested Accordion in Accordion( choose your one) for the Elementor Accordion widget.

N.B: If Elementor Template is new to you, visit Nested Accordion in Accordion.

Step-4: One more important thing is that the Accordion section will allow you to set Icon and Active Icon.

additional  settings

Simply go to Accordion > Icon and Active Icon.


accordion widget additional setting tab

Go to the Content tab > Additional > and check all the controls. Mostly, you can enable the Hash Location On/ Off option. When you will enable Hash Location, you will find another On/Off option Scrollspy.

Using the Hash Location and Scrollspy, You will be able to display the accordion content according to Hash Location and also with the scrolling effect.

Another thing is, firstly, to hit the Update button and next to the preview button. After that, you’ll see a link to the accordion you want to show open after scrolling for the Elementor Accordion widget.

accordionWidget 2 - BdThemes

For that, you’ve to copy the data title with a hash symbol(#) for example, #accordion-3. And the most important thing is you have to add the data title with the URL.

You should make the link following,

Note: To get the data title, inspect and copy the data title.

accordionWidget - BdThemes

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


accordion style 1 - BdThemes

Go to the Item section for setting Alignment and Spacing between each Accordion Items.


This section will let you set Background Type(classic/ gradient), Color, Image, Padding, Border Type, Radius, Box Shadow.

In connection with the mode of Normal and Active, you’ll get able to set Background Type (classic/ gradient), Box Shadow, Color and etc.


accordion style 2 - BdThemes


accordion style 4 - BdThemes


Title hover style settings

But, Hover mode will let you set Border Type (classic/ gradient), and Color,

Just go to the Style tab > Title.


icon style accordion

Go to the Style tab > one by one activate all the modes like Normal, Hover, and Active and finally check the controls of each mode.


accordion widget content style

Just, come to the Style tab > Content.

Here, you can do the same things that you’ve seen in the Title section in terms of Normal mode for the accordion widget.

Video Assist

In conclusion, it seems you’ve noticed how to use our Accordion Widget by Element Pack. It is easy but a little bit tricky. Watch Video Assist and to get more ideas about the usage of this widget, take a tour to the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.