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.
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');
});Plugins required:
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.
24 thoughts on “How to create a content toggle widget in elementor”
Hi,
your coupon code “designtheway” is invalid.
Do you have another?
Kind regards,
Ole
Hi Ole, sorry but the offer has expired, I have updated the post now.
Thanks!
Hi,
I tried to make content toggle as per your video tutorial but not able to go through. Not able to see any preview of widget.
https://designtheway.com/create-content-toggle-widget-in-elementor/
I want to make a Content Toggle . I am not software field so don’t know ABC of coding. What to do now?
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.
I am also getting the same error What is the solution for this
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!
hi, i loved it… Can i request adding option to the heading 1 and 2 to change the font size and color maybe?
Mark, you can easily add more customization options with some css and following the steps mentioned in the video.
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.
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,
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.
did you solve this? if it is please tell me the way
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.
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!
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
@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!
buddy you’re a lifesaver! I almost gave up on it! Bless you my friend
@Iskandar you are most welcome my friend!
Hello there,
I have followed your tutorial but the content toggle is not showing in preview and even after i updated.
Check screenshot here >> https://prnt.sc/vv76j9
Screenshot not appearing on site >> https://prnt.sc/vv77px
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!
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
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!
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?
Hi Kumar,
Can you share some images explaining your problem because your question is not very clear to me?
Thanks!