How to: Pricing table in Carrd

Simple Pricing Table in Carrd with Toggle Switch

! Carrd’s Pro Plus plan required (referral link) to be able to implement below code.

Here’s what we’re aiming for:

But before you start worrying about the toggle switch, you need to create 2 separate containers, one for ASK and second for BUY section… But feel free to name them differently or put different content inside of them!

• Important: Remember to set the width of both of that containers to 99 (avoid MAX widths, as well as FULL or FULL SCREEN)! 👇

Put whatever suits your project needs inside of these containers, e.g. instead of going for Ask-Buy pair, you can go for Yearly-Monthly Plan pair.

Now assign which container should be visible once ASK is enabled and which one once BUY is enabled:

Now, above these containers, create a separate container with 3 columns that has:

• 2 text elements (ASK on the very left, and BUY on the very right)
• 1 Embed element inside of the middle column

Once you’ve got that Embed element inside of the middle column, paste this code there:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<label class="switch">
<input type="checkbox" id="toggle" checked="">
<span class="slider round"></span>
</label>
<style>
.switch {
position: relative;
display: inline-block;
width: 61px;
height: 35px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #F5F5F7;
-webkit-transition: .3s;
transition: .3s;
}
.slider:before {
position: absolute;
content: "";
height: 27px;
width: 27px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .7s; transition: .7s;
}
input:checked + .slider {
background-color: #0071E3;
transition-delay: .5s;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
.slider.round {
border-radius: 45px;
}
.slider.round:before {
border-radius: 45px;
}
.buy {display:block;}
.ask {display:none;}
</style>
<script>
$('#toggle').click(function(){
 console.log(this.checked);
 if(this.checked == true) {
 $(".buy").show();
 $(".ask").hide();
 } else {
 $(".ask").show();
 $(".buy").hide();
 }
});
</script>

Now publish the project either to one of carrd’s URLs or your own domain, then refresh the page, and you’re set!

Article sponsored by me 😅:

If you like those articles, consider making a small PayPal donation. Thanks!

If you’d have any Carrd related question(s), send me a DM
@1foehn on Twitter