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:

Here are some of my favorite website building tools

Thank you for reading the article hope you have found this helpful. Here are some of my favorite tools that I always use and hope you will find them helpful too. Please note these are affiliate links, if you do purchase anything using my links I’ll earn a small commission at no extra cost to you. I recommend these tools to my clients and friends as well.

Web Hosting: For starting a new website, I like to use GreenGeeks. They are reliable and affordable for a beginner. They have a very simple setup process that anyone can use. I’m personally using their service for over a year now.

Page Builder: For building beautiful websites in a short period of time I like to use Elementor. It is one of the most powerful page builders in the market. You don’t need any technical knowledge to make websites.

Content Writing: When you make a website you have to add content to it. I use Grammarly to write better content. It improves the writing by checking spelling and grammar mistakes automatically. It has a premium version but for starters, the free version is a good starting point.

Advertising Network: When you have built the website and have traffic on it, ads are the easiest way to monetize the website. Adsense is the most popular choice but I recommend Ezoic which will give you a much higher earning than Adsense and the best part is it is free to use.

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

free wordpress training

23 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!

  3. Hi @ananda , thank you so much for the detailed explanation. It’s almosstttt perfect for me, just 1 problem. When I switch to secondary content, content position moved to the right. When i toggle back to primary content, it works goes back normal. And then it just repeats. It seemed like in secondary toggle, position is set at 0. What do you think causes this? My colleague said it’s caused by unlimited Elements but i don’t know for sure

    1. @Iskandar glad that you found it helpful, regarding the issue I saw it through your link it is maybe due to you are using a fullwidth section try using a boxed section and see if this fix the issue or not.

      Hope this helps!

    1. Hi Tunde,

      Please check if there is any error on the page or not, some other plugins might cause the problem too, try deactivating other plugins and check if that solves the issue or not.

      Hope this helps!

  4. Thank you – the problem is, that the Plugin does not save the content (HTML, JS, CSS). If I klick on Update, I see an JS error no matter what content has been entered.
    Too bad 🙁
    Uli

    1. Uli, I checked the plugin it is working properly, I think there is some js conflict on your site. Try disabling all other plugins and check if any other plugin is causing the conflict or not.

      Hope this helps!

  5. The procedure is good but on the other side, I’m using the pro version and going to use the toggle widget. I want to hide some text editors that I already used but toggle requests me to add new text and it seems it can’t hide my existing text editors’ contained text. Is any process to do it?

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