Do you have a question on how to properly create a pricing table on your website that is both aesthetic and effective? Look no further! Here in this post, you’ll learn about Creating a Pricing Table with a Two Cards Toggle using HTML, CSS & JavaScript.

Pricing Table with Two Cards Toggle Using HTML, CSS, and JavaScript

Byjvcodes

Do you have a question on how to properly create a pricing table on your website that is both aesthetic and effective? Look no further! Here in this post, you’ll learn about Creating a Pricing Table with a Two Cards Toggle using HTML, CSS & JavaScript.

This template is for ready use and will enable you to present the pricing plans and switching between yearly and monthly options seamlessly.

Let’s get in!

GitHub Source: Pricing Table with Two Cards Toggle

Features

  • Easy to Customize: The structure of the code is quite simple that makes it comfortable when customizing the codes according to one’s needs.
  • Toggle (Yearly/Monthly): It also has a beautiful switch to help the client switch between the two given price plans easy.
  • Animation: Playful animations further improve the usability when the component is toggling.
  • Compatibility: Companion for modern browsers and devices as it should be.
  • Clean Code: Clearly structured and documented for novices and gurus to follow and understand.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Pricing Plans

  • Create Project Folder: First of all, it is essential to make the folder and save all files connected with the project there.
  • Create index.html: HTML the structure of the pricing table and toggle feature.
  • Create style.css: Now apply styling rules so as to make the table for pricing more attractive and responsive.
  • Create script.js: Here write down the JavaScript code to make the toggle switch working.
  • Copy & Paste the Code: Please follow the source codes below to help you finish your project in a short time.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pets Care Pricing Table</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<section id="pricing-1387">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Our Pricing</span>
            <h2 class="cs-title">Affordable Plans for Your Pets' Well-Being</h2>
            <p class="cs-text">
                Provide the best care for your pets with our flexible pricing plans. Choose a package that suits your needs and ensure a happy, healthy life for your furry friends.
            </p>
            <div class="cs-toggle-group">
                <span id="cs-option1-1387" class="cs-plan">Pay Annually</span>
                <div class="cs-toggle" aria-label="Click to switch pricing plans">
                    <span aria-hidden="true" class="cs-toggle-switch"></span>
                </div>
                <span id="cs-option2-1387" class="cs-plan">Pay Monthly</span>
            </div>
        </div>
        <ul class="cs-card-group cs-option1">
            <li class="cs-item cs-popular">
                <div class="cs-flex">
                    <span class="cs-package">Basic Care</span>
                    <span class="cs-price">
                        $49
                        <span class="cs-duration">/Month</span>
                    </span>
                    <div class="cs-tag">
                        <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/fire.svg" decoding="async" alt="fire" width="16" height="16" loading="true">
                        Hot Deal
                    </div>
                </div>
                <div class="cs-info">
                    <ul class="cs-ul">
                        <li class="cs-li">Routine Checkups</li>
                        <li class="cs-li">Vaccination Reminders</li>
                        <li class="cs-li">Nutrition Tips</li>
                        <li class="cs-li cs-disabled">Emergency Care</li>
                        <li class="cs-li cs-disabled">Pet Grooming</li>
                    </ul>
                    <a href="" class="cs-button-transparent">Sign Up</a>
                </div>
            </li>
            <li class="cs-item">
                <div class="cs-flex">
                    <span class="cs-package">Premium Care</span>
                    <span class="cs-price">
                        $199
                        <span class="cs-duration">/Month</span>
                    </span>
                    <div class="cs-tag">
                        <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/fire.svg" decoding="async" alt="fire" width="16" height="16" loading="true">
                        Hot Deal
                    </div>
                </div>
                <div class="cs-info">
                    <ul class="cs-ul">
                        <li class="cs-li">Routine Checkups</li>
                        <li class="cs-li">Vaccination Reminders</li>
                        <li class="cs-li">Nutrition Tips</li>
                        <li class="cs-li">Emergency Care</li>
                        <li class="cs-li">Pet Grooming</li>
                    </ul>
                    <a href="" class="cs-button-transparent">Learn More</a>
                </div>
            </li>
        </ul>
        <ul class="cs-card-group cs-option2">
            <li class="cs-item cs-popular">
                <div class="cs-flex">
                    <span class="cs-package">Basic Care</span>
                    <span class="cs-price">
                        $499
                        <span class="cs-duration">/Year</span>
                    </span>
                    <div class="cs-tag">
                        <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/fire.svg" decoding="async" alt="fire" width="16" height="16" loading="true">
                        Hot Deal
                    </div>
                </div>
                <div class="cs-info">
                    <ul class="cs-ul">
                        <li class="cs-li">Routine Checkups</li>
                        <li class="cs-li">Vaccination Reminders</li>
                        <li class="cs-li">Nutrition Tips</li>
                        <li class="cs-li cs-disabled">Emergency Care</li>
                        <li class="cs-li cs-disabled">Pet Grooming</li>
                    </ul>
                    <a href="" class="cs-button-transparent">Sign Up</a>
                </div>
            </li>
            <li class="cs-item">
                <div class="cs-flex">
                    <span class="cs-package">Premium Care</span>
                    <span class="cs-price">
                        $1999
                        <span class="cs-duration">/Year</span>
                    </span>
                    <div class="cs-tag">
                        <img class="cs-icon" aria-hidden="true" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/fire.svg" decoding="async" alt="fire" width="16" height="16" loading="true">
                        Hot Deal
                    </div>
                </div>
                <div class="cs-info">
                    <ul class="cs-ul">
                        <li class="cs-li">Routine Checkups</li>
                        <li class="cs-li">Vaccination Reminders</li>
                        <li class="cs-li">Nutrition Tips</li>
                        <li class="cs-li">Emergency Care</li>
                        <li class="cs-li">Pet Grooming</li>
                    </ul>
                    <a href="" class="cs-button-transparent">Learn More</a>
                </div>
            </li>
        </ul>
    </div>
</section>
<script src="script.js"></script>                         
</body>
</html>

CSS

Here is the complete code for style.css file to style the pricing table:

/*-- -------------------------- -->
<---          Pricing by JV Codes          -->
<--- -------------------------- -*/

:root {
    --primary: #047ee2;
    --primaryLight: #fc7100;
    --secondary: #fc7100;
    --secondaryLight: #fc7100;
    --headerColor: #ff3c00;
    --bodyTextColor: #37344b;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-1387 {
        padding: var(--sectionPadding);
        overflow: hidden;
        background-color: #fff;
        position: relative;
        z-index: 1;
    }
    #pricing-1387 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 3vw, 4rem);
        position: relative;
    }
    #pricing-1387 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #pricing-1387 .cs-title {
        max-width: 20ch;
    }
    #pricing-1387 .cs-text {
        margin-bottom: 1rem;
    }
    #pricing-1387 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #pricing-1387 .cs-toggle-group {
        width: 100%;
        max-width: 25.875rem;
        margin: 0;
        padding: 0.75rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: #f1f1f4;
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #pricing-1387 .cs-plan {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        color: var(--headerColor);
    }
    #pricing-1387 .cs-plan:hover {
        cursor: pointer;
    }
    #pricing-1387 .cs-toggle {
        width: 3.25rem;
        height: 2rem;
        border-radius: 2.5rem;
        background-color: var(--primaryLight);
        margin: 0 1.5rem;
        position: relative;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #pricing-1387 .cs-toggle:hover {
        cursor: pointer;
    }
    #pricing-1387 .cs-toggle.active:before {
        opacity: 1;
    }
    #pricing-1387 .cs-toggle.active .cs-toggle-switch {
        left: 1.4375rem;
    }
    #pricing-1387 .cs-toggle:before {
        /* top right box */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        border-radius: 2.5rem;
        transition: opacity 0.3s;
    }
    #pricing-1387 .cs-toggle-switch {
        width: 1.625rem;
        height: 1.625rem;
        display: block;
        border-radius: 50%;
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
            drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.1875rem;
        transition: left 0.3s;
        background: #fff;
    }
    #pricing-1387 .cs-card-group {
        width: 100%;
        max-width: 39.375rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 16px - 20px */
        gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #pricing-1387 .cs-card-group.cs-active.cs-option1 {
        /* when the active class is on the cs-card-group, run these styles */
        transform: scale(0);
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
    }
    #pricing-1387 .cs-card-group.cs-active.cs-option1 .cs-item {
        /* when the active class is on the cs-card-group, run these styles */
        opacity: 0;
        transform: translateY(1.25rem) rotateY(90deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing-1387 .cs-card-group.cs-active.cs-option2 {
        /* when the active class is on the cs-card-group, run these styles */
        visibility: visible;
        pointer-events: all;
        opacity: 1;
        position: relative;
        right: auto;
        bottom: auto;
        transform: scale(1);
    }
    #pricing-1387 .cs-card-group.cs-active.cs-option2 .cs-item {
        /* when the active class is on the cs-card-group, run these styles */
        opacity: 1;
        transform: translateY(0rem) rotateY(0deg);
    }
    #pricing-1387 .cs-option1 {
        /* default styles when there is no active class on the cs-card-group */
        opacity: 1;
        visibility: visible;
        right: 0;
        bottom: auto;
        transform: scale(1);
        transform-origin: top;
        transition:
            transform 0.6s,
            opacity 0.3s,
            visibility 0.3s;
    }
    #pricing-1387 .cs-option1 .cs-item {
        /* default styles when there is no active class on the cs-card-group */
        opacity: 1;
        transform: translateY(0rem) rotateY(0deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing-1387 .cs-option1 .cs-item:nth-of-type(2) {
        transition-delay: 0.2s;
    }
    #pricing-1387 .cs-option1 .cs-item:nth-of-type(3) {
        transition-delay: 0.4s;
    }
    #pricing-1387 .cs-option2 {
        /* default styles when there is no active class on the cs-card-group */
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        transform: scale(0);
        transform-origin: top;
        transition:
            transform 0.6s,
            opacity 0.3s,
            visibility 0.3s;
    }
    #pricing-1387 .cs-option2 .cs-item {
        /* default styles when there is no active class on the cs-card-group */
        opacity: 0;
        transform: translateY(1.25rem) rotateY(90deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing-1387 .cs-option2 .cs-item:nth-of-type(2) {
        transition-delay: 0.2s;
    }
    #pricing-1387 .cs-option2 .cs-item:nth-of-type(3) {
        transition-delay: 0.4s;
    }
    #pricing-1387 .cs-item {
        text-align: center;
        list-style: none;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }
    #pricing-1387 .cs-item.cs-popular .cs-flex {
        background-color: var(--primary);
    }
    #pricing-1387 .cs-item.cs-popular .cs-tag {
        display: flex;
    }
    #pricing-1387 .cs-item.cs-popular .cs-package,
    #pricing-1387 .cs-item.cs-popular .cs-price,
    #pricing-1387 .cs-item.cs-popular .cs-duration {
        color: var(--bodyTextColorWhite);
    }
    #pricing-1387 .cs-item.cs-popular .cs-duration {
        opacity: 0.8;
    }
    #pricing-1387 .cs-item.cs-popular .cs-button-transparent {
        background-color: var(--primary);
        color: #fff;
        transition:
            color 0.3s,
            border-color 0.6s,
            background-color 0.3s;
    }
    #pricing-1387 .cs-item.cs-popular .cs-button-transparent:hover {
        border-color: #fc7100;
        background-color: #fc7100;
    }
    #pricing-1387 .cs-flex {
        /* 196px - 250px */
        width: clamp(12.25rem, 25vw, 15.625rem);
        height: clamp(12.25rem, 25vw, 15.625rem);
        margin-bottom: -6.25rem;
        border-radius: 50%;
        background-color: #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    #pricing-1387 .cs-tag {
        font-size: 0.8125rem;
        color: var(--headerColor);
        text-transform: uppercase;
        /* keeps the text in one line, won't jump to two lines */
        white-space: nowrap;
        font-weight: 700;
        padding: 0.5rem;
        gap: 0.25rem;
        border-radius: 50px;
        background-color: #fff;
        /* clips the corners of the pseudo element */
        overflow: hidden;
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: -0.25rem;
        transform: translateX(-50%);
    }
    #pricing-1387 .cs-tag:before {
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.3;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #pricing-1387 .cs-icon {
        width: 1.25rem;
        height: auto;
        display: flex;
    }
    #pricing-1387 .cs-package {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        /* 4px - 8px */
        margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
    }
    #pricing-1387 .cs-price {
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 4vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--headerColor);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    #pricing-1387 .cs-duration {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin: 0;
        /* 4px - 8px */
        padding: clamp(0.25rem, 1vw, 0.5rem) 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #pricing-1387 .cs-info {
        width: 100%;
        padding: 5.375rem 2.5rem 2.5rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #abe7ff;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #pricing-1387 .cs-ul {
        width: 100%;
        margin: 2.5rem 0 2.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }
    #pricing-1387 .cs-li {
        font-size: 1rem;
        list-style: none;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #pricing-1387 .cs-li.cs-disabled {
        opacity: 0.5;
    }
    #pricing-1387 .cs-button-transparent {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        color: var(--primary);
        padding: 0 3rem;
        border-radius: 1.875rem;
        border: 1px solid var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #pricing-1387 .cs-button-transparent:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #fc7100;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #pricing-1387 .cs-button-transparent:hover {
        color: var(--bodyTextColorWhite);
        border-color: #fc7100;
    }
    #pricing-1387 .cs-button-transparent:hover:before {
        width: 100%;
    }
    #pricing-1387 .cs-button-transparent {
        margin-top: auto;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-1387 .cs-container {
        max-width: 80rem;
    }
    #pricing-1387 .cs-container .cs-card-group {
        flex-direction: row;
        align-items: stretch;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #pricing-1387 .cs-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #pricing-1387 .cs-content {
        text-align: left;
        width: 47%;
        align-items: flex-start;
    }
    #pricing-1387 .cs-info {
        min-height: 27rem;
    }
}

JavaScript

Here is the complete code for script.js file to function the pricing table properly:

const leftOption = document.querySelector("#pricing-1387 #cs-option1-1387");
        const rightOption = document.querySelector("#pricing-1387 #cs-option2-1387");
        const toggle = document.querySelector("#pricing-1387 .cs-toggle");
        const cardGroup = Array.from(document.querySelectorAll('#pricing-1387 .cs-card-group'))
        // when you click the middle toggle
        toggle.addEventListener('click', (e) => { 
            for (const item of cardGroup) {
                item.classList.toggle("cs-active");
            }
            toggle.classList.toggle("active");
        });       
        // when you click the left button option
        leftOption.addEventListener('click', (e) => { 
            for (const item of cardGroup) {
                item.classList.remove("cs-active");
            }
            toggle.classList.remove("active");
        });    
        // when you click the right button option
        rightOption.addEventListener('click', (e) => { 
            for (const item of cardGroup) {
                item.classList.add("cs-active");
            }
            toggle.classList.add("active");
        });

Download Source Code

Great news! You can now free download Pricing Table with Two Cards Toggle Using HTML, CSS, and JavaScript source code without any copyright issues. It only takes a click on the download button below to start using it and apply it on your website.

Download Source Code

Conclusion

One of the alternatives which can be effectively used on your website is the Pricing Table with Two Cards Toggle. Do not forget to get a backlink from JV Source Codes by linking back to them.

So I will remind you once again that if you want to get more materials like this, you can subscribe to the channel. In case of any problems, you can leave the comment below and I will help you gladly.

Download JV Source Codes

Similar Posts

Responsive BMI Calculator Using HTML, CSS and JavaScript (Free Source Code)
| |

Responsive BMI Calculator Using HTML, CSS and JavaScript (Free Source Code)

Body Mass Index (BMI) Calculator is so simple and effective tool to keep track of health. Here’s a responsive BMI calculator that works on different sizes of screen. In this article, I will be sharing a free source code for a Responsive BMI Calculator Using HTML, CSS and JavaScript that you can use on your…

Color Picker Tool
| |

Color Picker Tool in HTML, CSS and JavaScript (Free Source Code)

The Color Picker Tool in HTML, CSS, JavaScript is a basic and effective effective component that enables users to choose colors and receive the matching Hexadecimal (HEX), RGB, RGBA, and HSL values. For a web designer, it is important to use a good color picker. In this article, I am going to give you the…

Responsive Image Gallery
| | |

Responsive Image Gallery in HTML and CSS

If the image gallery could be effectively implemented into the website, it can greatly improve the usability and visual appeal of a website. That’s why I have written this article on the Responsive Image Gallery in HTML & CSS, to make you understand how it works. GitHub Source: Responsive Image Gallery To help you better,…

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents.
| |

Responsive Sales Tax Calculator Using HTML, CSS and JavaScript (Free Source Code)

A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents. If you have to include it as a component of a blog post, as a sidebar widget, or as part of a YouTube tutorial, then this…

Leave a Reply

Your email address will not be published. Required fields are marked *