Table Of Contents

Toggle Widget

How to Use Toggle Widget

It is Toggle that is collapsable and it allows one to go from one state to another with a click event. Let me tell you how to use Toggle Widget to create a collapsable event.

To Insert Widget

inserting Toggle Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, just drag the Elementor Toggle Widget into your page.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part (option be added) of a website. And in this regard, some handy sections in the tab will assist you a lot in making the toggle button.


This section holds all the settings of Toggle. Here, you’ll be able to set Toggle title, type, and source(Custom, Elementor and AE Template). One more thing for the content Toggle icon (for showing or not).

content Toggle Widget

Go the Content tab > Toggle.

Note: Apart from the custom source, if you want toggle to show data from Elementor/ AE Template, you have to create a template first like the Nested tab in tabs.

On the contrary, if interested in custom, you can stay. As the photo below demonstrates how to make a custom toggle button.

custom toggle


From this section, you can select Toggle icon and set the alignment of the icon.

toggle 3 - BdThemes

Simply, go to the Content tab > Additional.

Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design with the Toggle Widget. 

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

Let’s have a look.


In this section, there are two modes(Normal and Active). The both modes will allow you to style the Title.

The normal mode will let you set text color, box-shadow, padding, typography, shadow color, and shadow height to the Title.

toggle style 2 - BdThemes

Go to the Title > Normal.

In contrast, Active mode only allows text color.

toggle style 1 1 - BdThemes

Go to the Title > Active.


Here this section will allow you to set the alignment, text color, and typography of the content.

Simply, go to > the Style tab > Content.


Here, regarding the Normal mode, you may add color and spacing to the icon. But, in the Active mode, you can add color only.

toggle style 4 - BdThemes

Just go to the Style tab > Icon (Normal and Active).

Video Assist

Finally, it seems you’ve noticed how painless it is to use our Toggle Widget by Element Pack and found this documentation easy and useful. 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
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

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 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.