How to Build Pricing Tables in Website via HTML/ CSS/ JS? Part 3 (IF) | by Informula | in Dev Genius

In this series of articles, we will show you how to make a dynamic pricing tables in Website frontend development via HTML, CSS and JavaScript. We are going to show you multiple different ways of presenting your pricing tables based on your product plans, website layout, target audiences’ device, etc.

Pricing Table 1 Link

Pricing Table 2 Link

The third Pricing Table is to allow the users to toggle on the plan and detail buttons to get the corresponding prices.

Environment

:root{   --main-color: #4a4e69; }

HTML – Structure

The pricing table is built under the class “pricing_container”, which contains class “subscription_options” and “setting”. Class “subscription_options” contains three columns (class “subscription col1” & “subscription col2” & “subscription col3”). Each class “subscription” includes five rows and one

for total price.

    
           
             
             
             
             
             
             
             
             
             
             
             
...
           
           
             
             
             
             
             
             
             
             
             
             
             
...
           
           
             
             
             
             
             
             
             
             
             
             
             
...
           
           	
   
 ... 
 

CSS Styling – Pricing Container

.pricing_container{ 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;   height: 120vh;   width: 100%;   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; }

CSS Styling – Subscription options

.subscription_options{   width: 100%;   max-width: 600px;   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-gap: 2px; }

CSS Styling – Subscription

.subscription{   display: grid;   width: 200px;   grid-template-rows: repeat(6, 1fr);   grid-template-columns: repeat(1, 1fr);   border: solid 1px grey;   border-radius: 5px;   text-align: center; }

CSS Styling – Col1 / Col2/ Col3

The first column is header so I want some space to separate column 1 from the other columns (option details and descriptions).

.subscription.col1 {   justify-self: center;   width: 100px; } .subscription .row1{   padding: 5px;   align-self: center;   text-align: center; }  .subscription .row2 {   padding: 5px;   text-align: center;   align-self: center;   background-color: rgb(112, 175, 218); }  .subscription .row3 {   padding: 5px;   text-align: start; }  .subscription .row4 {   padding: 5px;   text-align: start; }  .col1 .row4 {   text-align: center; }  .subscription .row5 {   padding: 5px;   text-align: start;   border-bottom: solid 1px; }

JavaScript – Toggle and Control

Let’s take an example of first basic option for online POS located in col2 and row3. When the ratio input is clicked, it will replace the inner HTML string with $990 for ID “online_price”.

                               
Basic
  
 function one_one() {   if (document.getElementById('one_one').checked === true) {     document.getElementById('online_price').innerHTML = '$990';   } }  function one_two() {   if (document.getElementById('one_two').checked === true) {     document.getElementById('online_price').innerHTML = '$1500';   } }  function one_three() {   if (document.getElementById('one_three').checked === true) {     document.getElementById('online_price').innerHTML = '$2000';   } }  function two_one() {   if (document.getElementById('two_one').checked === true) {     document.getElementById('retail_price').innerHTML = '$1580';   } }  function two_two() {   if (document.getElementById('two_two').checked === true) {     document.getElementById('retail_price').innerHTML = '$2000';   } }

Link of demo

Thank you! Enjoy it!