fbpx

How to create a content toggle widget in elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

You may have seen many websites show two pricing plans like for example monthly and yearly or yearly and lifetime so and so…

They show it in a way that you can easily toggle between the two pricing plans, it gives a better user experience and saves some space on the page.

If you want to use a content toggle widget in elementor you can use some add-ons most of them are paid or you can create your own.

In this video, I’ll show you how you can create your own content toggle widget with simple Html, Css and JS for free.

For creating our elementor widget we will use a free plugin called Unlimited Elements for Elementor

designtheway

Here is the code

<div class="my-content-toggle" id="{{uc_id}}">
  <div class="toggle-btn-sec">
    <div class="heading-1">{{heading_1|raw}}</div>
    <div class="main-btn">
      <label class="switch">
        <input type="checkbox" class="tgl">
        <span class="slider round"></span> </label>
    </div>
    <div class="heading-2">{{heading_2|raw}}</div>
  </div>
  <div class="section-1">{{primary_content|raw}}</div>
  <div class="section-2 hide-sec">{{secondary_content|raw}}</div>
</div>
.toggle-btn-sec {
    display: flex;
    justify-content: center;
}
.main-btn {
    margin: 0 20px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
#{{uc_id}} .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: {{switch_bg}};
  -webkit-transition: .4s;
  transition: .4s;
}
#{{uc_id}} .switch .slider:after {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: {{switch_color}};
  -webkit-transition: .4s;
  transition: .4s;
}
#{{uc_id}} .switch input:checked + .slider {
  background-color: {{active_switch_bg}};
}
#{{uc_id}} .switch input:checked + .slider:after {
  background-color: {{active_switch_color}};
}
.switch input:checked + .slider:after {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 50em;
}
.slider.round:after {
  border-radius: 50%;
}
.hide-sec{
  display:none;
}
if (jQuery("#{{uc_id}} .tgl").is(':checked')){
    jQuery('#{{uc_id}} .section-1').addClass("hide-sec");
	jQuery('#{{uc_id}} .section-2').removeClass("hide-sec");
}
jQuery('#{{uc_id}} .tgl').change(function(){
    jQuery('#{{uc_id}} .section-1,#{{uc_id}} .section-2').toggleClass('hide-sec');
});

Disclosure: Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.

You can use premium versions to get more features:

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

13 thoughts on “How to create a content toggle widget in elementor”

    1. Hi Ranajeet, what exact problem are you facing? Just watch the video carefully and make sure you didn’t miss any steps. If you still having problems share your link with me so I can check the issue.

      1. Hi Shahnawaz,

        As I have mentioned to all other readers please check the video once more to see if you have missed any part or not because I still have that widget on my demo site with the latest version of WordPress and Elementor, it works perfectly well or you can share your link so I can check and give you a proper solution.

        Hope this helps!

    1. Ananda the video was very helpful, but when when I switch to the next toggle, the next toggle slides off to right corner changing the whole alignment. Need your help, please.

  1. Hey Ananda,

    Thanks for your video, Was very helpful.
    There is a huge error happening to me.
    When I press the toggle button the second content slides off to right corner & sticks onto the margin.
    Please help,

    1. Thanks, Nandu for checking the video but with this little information it is very hard to know the reason. I would request you to watch the video again to see if you have missed anything or not otherwise please share the URL so I can check once to guide you better.

  2. Hello,
    I did this toggle code on unlimited elements as per your video. It was worked well on elementor 2.10, after updating to elementor 3.0.11 this widget isn’t available on elementor editing panel. All the other widgets installed from unlimited elements are there except this widget and it is not showing in widget panel in elementor.

    1. Hi Kiruba,
      I have tried this widget with latest version of Elementor and Unlimited elements everything is working perfectly, please try deactivating other plugins to see if it solves the problem or not.

      Hope this helps!

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top
website design illustration

Learn The Exact Steps I Follow To Create WordPress Websites

Easily create WordPress websites for yourself and others following my 2 hrs FREE WordPress Training (Video).