Billing Toggle Pricing

About this module

A pricing grid driven by a monthly/annual toggle that re-prices every plan instantly with JavaScript.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the section markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <section class="mh-sec">
     <div class="mh-container mh-center-head">
       <span class="mh-eyebrow">Pricing</span>
       <h2 class="mh-h2">Pick your plan</h2>
       <label class="mh-bill-toggle">
         <span>Monthly</span>
         <input id="mh-billing" type="checkbox" />
         <span class="mh-track"><span class="mh-knob"></span></span>
         <span>Annual <em>−20%</em></span>
       </label>
       <div class="mh-two">
         <div class="mh-plan">
           <h3>Pro</h3>
           <div class="mh-amount"><span data-monthly="$24" data-annual="$19">$24</span>/mo</div>
           <ul><li>Unlimited modules</li><li>ZIP downloads</li></ul>
           <button>Choose Pro</button>
         </div>
         <div class="mh-plan featured">
           <h3>Team</h3>
           <div class="mh-amount"><span data-monthly="$59" data-annual="$47">$59</span>/mo</div>
           <ul><li>Everything in Pro</li><li>5 seats</li><li>SSO</li></ul>
           <button>Choose Team</button>
         </div>
       </div>
     </div>
   </section>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const toggle = document.getElementById("mh-billing");
   const prices = document.querySelectorAll("[data-monthly]");
   const update = () => {
     const annual = toggle.checked;
     prices.forEach((el) => {
       el.textContent = annual ? el.dataset.annual : el.dataset.monthly;
     });
   };
   toggle.addEventListener("change", update);
   update();