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

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.

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.