Creating an Interactive Pricing Table Using jQuery
Pricing tables are an essential component of many websites, especially for businesses offering tiered pricing plans for products or services. Making these tables interactive enhances user experience by providing dynamic effects like hover highlights, toggling between monthly and yearly billing, real-time calculations, and other interactive elements.
In this guide, we will go step-by-step through the process of creating an interactive pricing table using HTML, CSS, and jQuery. This will include:
- Structuring the pricing table using HTML
- Styling it effectively with CSS
- Adding interactivity using jQuery (e.g., hover effects, toggle buttons)
- Implementing real-time price changes with animations
- Ensuring responsiveness for mobile users
1. Setting Up the HTML Structure
The first step is to define a basic pricing table structure. We’ll create a table that displays three different pricing plans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Pricing Table</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="pricing-container">
<h1>Select Your Plan</h1>
<div class="billing-toggle">
<span>Monthly</span>
<label class="switch">
<input type="checkbox" id="billing-toggle">
<span class="slider"></span>
</label>
<span>Yearly <span class="discount"> (Save 20%)</span></span>
</div>
<div class="pricing-table">
<div class="plan basic">
<h2>Basic</h2>
<p class="price"><span class="currency">$</span><span class="amount">10</span><span class="duration">/mo</span></p>
<ul>
<li>✔ 10GB Storage</li>
<li>✔ Basic Support</li>
<li>✔ 1 User</li>
</ul>
<button class="select-plan">Select Plan</button>
</div>
<div class="plan pro">
<h2>Pro</h2>
<p class="price"><span class="currency">$</span><span class="amount">20</span><span class="duration">/mo</span></p>
<ul>
<li>✔ 50GB Storage</li>
<li>✔ Priority Support</li>
<li>✔ 5 Users</li>
</ul>
<button class="select-plan">Select Plan</button>
</div>
<div class="plan premium">
<h2>Premium</h2>
<p class="price"><span class="currency">$</span><span class="amount">30</span><span class="duration">/mo</span></p>
<ul>
<li>✔ 100GB Storage</li>
<li>✔ 24/7 Support</li>
<li>✔ Unlimited Users</li>
</ul>
<button class="select-plan">Select Plan</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. Styling the Pricing Table with CSS
We will now design the pricing table using CSS to make it visually appealing.
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
h1 {
margin-bottom: 20px;
}
.pricing-container {
max-width: 800px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin: 0 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
border-radius: 24px;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
}
input:checked + .slider {
background-color: #4CAF50;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.pricing-table {
display: flex;
justify-content: space-between;
}
.plan {
flex: 1;
padding: 20px;
background: #fff;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.plan:hover {
transform: scale(1.05);
}
.price {
font-size: 24px;
font-weight: bold;
margin: 10px 0;
}
.select-plan {
background: #007BFF;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
.select-plan:hover {
background: #0056b3;
}
3. Adding Interactivity with jQuery
Now, we add interactivity using jQuery.
a) Toggle Between Monthly and Yearly Pricing
We will use jQuery to toggle the pricing dynamically.
$(document).ready(function () {
$("#billing-toggle").change(function () {
if ($(this).is(":checked")) {
$(".basic .amount").text("96"); // Yearly price with discount
$(".pro .amount").text("192");
$(".premium .amount").text("288");
$(".duration").text("/yr");
} else {
$(".basic .amount").text("10"); // Monthly price
$(".pro .amount").text("20");
$(".premium .amount").text("30");
$(".duration").text("/mo");
}
});
// Button Click Animation
$(".select-plan").click(function () {
alert("Plan Selected: " + $(this).closest(".plan").find("h2").text());
});
});
4. Enhancements and Additional Features
a) Add Hover Effects
Using jQuery, we can highlight the selected plan on hover.
$(".plan").hover(function () {
$(this).css("border", "2px solid #007BFF");
}, function () {
$(this).css("border", "none");
});
b) Ensure Mobile Responsiveness
We modify CSS to make the design mobile-friendly.
@media (max-width: 768px) {
.pricing-table {
flex-direction: column;
}
}
We successfully built an interactive pricing table with: ✅ HTML for structure
✅ CSS for styling
✅ jQuery for interactivity
Key features include:
- Pricing toggle for monthly/yearly plans
- Hover effects
- Responsive design
- Smooth animations
By following this guide, you can enhance user engagement and improve conversions with an attractive pricing table.