How to Use Toggle Widget


How to Use Toggle Widget

It is Toggle that is collapsable and it allows one to go one state to another with click event. In this documentation below, I’ll show you how to use our Toggle Widget to create a collapsable event.

To Insert Widget

Inserting widget, it is just a matter of drag 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 (option be added) of a website. And in this regard, some handy sections in the tab will assist you a lot.


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 Toggle icon (for showing or not).

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.


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. 

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.

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.

Copyright © 2022 BdThemes. All Rights Reserved.