Hi,
Is there an way to create a toggle switch similar to the one on the divhunt current pricing page that toggles between individual and agency plans? I want to do it for monthly/annual plans for my website. Can’t seem to find a button for this in the builder.
Thanks
Hi,
Currently we are selling only lifetime deals. All the prices you see there are one-time, they are not subscription based. So that’s why theres no toggle for yearly/monthly on current pricing page.
Hi Pakic,
Sorry I meant how do I create this toggle in my own website? I want to show monthly/annual plans for my own website. Is it using a loop?
Aaah, sorry, I just woke up, didnt read that correctly 
It requires a bit of custom JavaScript, and usually what happens on a page when you toggle something requires JS, if I create you tutorial with use of jQuery/JavaScript, would you be able to understand, I am not sure if you are familiar with it?
And as well, this gave me idea, we might be able to create a plugin for such purposes, I can put that in Wishlist.
Ah ok so it is done with custom JS. Was wondering if it was already a feature in the builder we can enable.
Tutorial would be great. And the plug-in too. Maybe a quick alternative would be to include this component in one of the templates so it can be easily replicated?
On that note, is copying components between project possible right now?
@Pakic Did anything become of this toggle tutorial / plugin? I was considering making a toggle and a search brought me here…
What I was thinking about was a toggle like you get for settings in a mobile app, stuff like this:
Ideally we shouild be able to freely style the toggle as we can do to most things in divhunt, what we need is an easy way to enable the toggle functionality where we want to use it.
In general I am thinking about ways to make my pages more mobile friendly by perhaps addopting some conventions from mobile app interfaces. Apps are often more user friendly to use than websites when you are on a mobile device.
Should also be able to do this with a custom styled radio button!
Here’s a not so quick tutorial on how to create a toggle switch for pricing:
Here’s the JSON for toggle:
{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"span","label":"Span","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{"1":"Monthly"},"css":{},"Target":null},{"tags":[],"symbol":null,"order":300,"loop":1,"name":"span","label":"Span","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{"1":"Yearly"},"css":{},"Target":null,"target":{"0":{},"length":1}},{"tags":[{"tags":[],"symbol":null,"order":100,"loop":1,"name":"div","label":"Circle","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{},"css":{"1920":{"self":{"height":"24px","width":"24px","background":"rgba(0,0,0,1.00)","border-radius":"100%","position":"absolute","top":"3px","left":"3px","right":"auto","bottom":"auto","transition":"all 200ms 0ms linear"}}},"Target":null}],"symbol":null,"order":200,"loop":1,"name":"div","label":"Toggle","attributes":{"1":{"class":"toggle"}},"classes":{"1":[]},"conditions":{},"properties":{},"text":{},"css":{"1920":{"self":{"width":"60px","height":"30px","background":"rgba(255,255,213,1.00)","border-radius":"100px","position":"relative","transition":"all 200ms 0ms linear"},".dh-active":{"background":"rgba(253,253,87,1.00)"},".dh-active div":{"left":"50%"}}},"Target":null}],"symbol":null,"order":100,"loop":1,"name":"div","label":"Toggle Wrapper","attributes":{},"classes":{},"conditions":{},"properties":{},"text":{},"css":{"1920":{"self":{"display":"flex","align-items":"center","column-gap":"10px","justify-content":"center"}}},"Target":null}
Here’s the JS code I used:
$(document).on('click','.toggle',function(){
$(this).toggleClass("dh-active");
if ( $(this).hasClass("dh-active") ) {
$(".price-y").show();
$(".price-m").hide();
$(".price-text").text("/per year");
} else {
$(".price-y").hide();
$(".price-m").show();
$(".price-text").text("/per month");
}
});
Exceptional Tutorial @Pakic
I wish I had learnt Javascript 
Maybe it’s not too late lol. I can understand what you show 100%, but it would be useful to be able to write my own as needed. Oh well.
About the tutorial, I know you guys like to have your Youtube tutorials a certain way, with Divhunt branded colors and some explanatory animations, but I really think these videos you guys make to answer our questions here on the forum are good enough for Youtube and more people might find them there. If you want to add explanatory info or code to the tutorial you can put that in the video description and you can make a seperate playlist for these videos if you want to keep them separate from the more pro produced tutorials. Just a suggestion. In any case, the Divhunt team has a talent for explaining things well, the videos are 
I agree and also suggested adding a tag here in the forum for the tutorials.