Quarterly

Yearly (30% Discount)

#toggle-container { width: 100% !important; padding: 15px; width: fit-content; font-family: sans-serif; } .billing-option { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #e0c8ff; font-weight: 600; color: #3b0073; } .billing-option:last-child { border-bottom: none; } .discount { background-color: #3d007c; color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-left: 6px; } /* Toggle switch */ .switch { position: relative; display: inline-block; width: 48px; height: 26px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 26px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background: linear-gradient(0deg, #58049E 0%, #2D0052 100%); } input:checked + .slider:before { transform: translateX(22px); } document.addEventListener("DOMContentLoaded", function () { const toggleQ = document.getElementById("contractToggle"); const toggleY = document.getElementById("contractToggleYearly"); // Get all price containers const quarterlyPrices = document.querySelectorAll('.quarterly-price'); const yearlyPrices = document.querySelectorAll('.yearly-price'); const discountImages = document.querySelectorAll('.discount-img'); function updatePriceDisplay(isYearly) { // Update all quarterly prices quarterlyPrices.forEach(div => { div.style.display = isYearly ? "none" : "block"; }); // Update all yearly prices yearlyPrices.forEach(div => { div.style.display = isYearly ? "block" : "none"; }); // Update all discount images discountImages.forEach(img => { img.style.display = isYearly ? "block" : "none"; }); } // Only allow one active at a time toggleQ.addEventListener("change", function () { if (this.checked) { toggleY.checked = false; updatePriceDisplay(false); } else { toggleY.checked = true; updatePriceDisplay(true); } }); toggleY.addEventListener("change", function () { if (this.checked) { toggleQ.checked = false; updatePriceDisplay(true); } else { toggleQ.checked = true; updatePriceDisplay(false); } }); // Initialize on load updatePriceDisplay(toggleY.checked); });