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.

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.

Go to the Title > Normal.

In contrast, Active mode only allows text color.

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.

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.


Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!