Toggle pricing table using a slider button

Home » Blog » Toggle pricing table using a slider button

To begin with, the toggle pricing demonstration will be using DIVI’s pricing tables module which is basically HTML and CSS. Therefore, the overall concept will be similar to any theme you will be using.

Now to implement the pricing table from month to year, I followed, but not all, this Facebook live instruction.

So here’s the step by step guide on how I made it.

First of all, create the toggle pricing tables

First is to create the monthly pricing table and add a class name “month”.

  • In this case, I created 3 different pricing tables instead of just creating one and add 3 elements like in the Facebook demo.

Secondly, I duplicated all the monthly pricing tables and add a class name “year”.

  • Edit the tables and add the annual prices and product links.

Moreover, on the DIVI’s Section where the pricing tables are located, add an ID name “toggle-tables”.

Next, is to add some of his CSS code locally on the Settings (same page – top right, see image below for visualization).

[css]/* Toggle price structure */
.toggle-tables .year.et_pb_pricing {
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

.toggle-tables.annual .year.et_pb_pricing {
z-index: 1;
}

.et_pb_column {
position: relative;
}

.toggle-tables.annual .show-monthly {
display: block;
}

.toggle-tables .show-monthly {
display: none;
}

.toggle-tables .show-annual {
display: block;
}

.toggle-tables.annual .show-annual {
display: none;
}
[/css]

Secondly, create the toggle pricing slider button

Once the tables are overlapping each other, we’re now done with Facebook live from Divi Space. And it’s now time to create our slider button.

On top of the pricing tables, first, add a new row and insert a fullwidth code module.

In addition, add this checkbox type input with the corresponding classes and click save.

[sourcecode]
<label class="switch">
<input type="checkbox">
<span class="slider round">
<span class="show-annual">Monthly</span>
<span class="show-monthly">Yearly</span>
</span>
</label>
[/sourcecode]



Also, on the Page settings for CSS, insert this code:

[css]/* slider button for toggle pricing */
.switch {
display: inline-block;
height: 34px;
min-width: 60px;
position: relative;
vertical-align: middle;
}
.switch .slider {
background-color: #e02b20;
bottom: 0;
color: #fff;
cursor: pointer;
display: block;
height: 34px;
left: 0;
padding: 0 20px 0 40px;
position: relative;
right: 0;
top: 0;
transition: 0.4s;
text-transform: uppercase;
font-family: monospace;
}
.switch .slider .show-annual, .switch .slider .show-monthly {
line-height: 34px;
}
.switch .slider .show-monthly {
display: block;
}
.switch .slider .show-annual {
display: none;
}
.switch .slider:before {
background-color: #fff;
bottom: 4px;
content: " ";
height: 26px;
left: 4px;
position: absolute;
transition: all 0.4s;
width: 26px;
}
.switch .slider.round {
border-radius: 34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
.switch input {
display: none;
}
.switch input:focus + .slider {
box-shadow: 0 0 1px #e02b20;
}
.switch input:checked + .slider {
background-color: #e02b20;
padding: 0 40px 0 20px;
}
.switch input:checked + .slider:before {
left: auto;
right: 4px;
transition: all 0.4s;
}
.switch input:checked + .slider .show-annual {
display: block;
}
.switch input:checked + .slider .show-monthly {
display: none;
}
[/css]

And lastly, add the jQuery

Once everything is added, create another code module below the pricing table so we can add the jQuery code.
Finally, in the code block, add this code:
[sourcecode]
<script>
jQuery(document).ready(function($){
$(".slider").click(function(){
$(".toggle-tables").toggleClass("annual");
});
});
</script>
[/sourcecode]

You can check the live result of this tutorial here.

Note: The HTML and CSS for slider button is similarly copied from codepen. Thanks to Kieran Boyle!