PRICING TOGGLE
by Rehmat (Animated Creativity) - MIT License

1. Add:   <link rel="stylesheet" href="pricing.css">
          <script src="pricing.js" defer></script>

2. HTML:  <div data-pricing>
            <div data-pricing-toggle>
              <button data-period="monthly">Monthly</button>
              <button data-period="yearly">Yearly <span class="pt-badge">-20%</span></button>
            </div>
            <span data-price data-monthly="49" data-yearly="39">$49</span>
          </div>

Also changes with the period:
  <span data-pricing-text data-monthly="per month" data-yearly="per month, billed yearly">per month</span>
  <a data-pricing-href data-monthly="/buy?m" data-yearly="/buy?y" href="/buy?m">Buy</a>
  <span data-pricing-show="yearly" hidden>Save $120</span>

Wrapper options:  data-pricing-default="yearly"  data-pricing-duration="500"  data-pricing-remember="my-site"

Attributes use plain numbers (1250, 9.99). The visible text sets the style ($1,250 or 9,99 EUR).
From JavaScript:  var p = PricingToggle(wrapper); p.select('yearly'); p.period; p.refresh();
Event:            document.addEventListener('pricingchange', function (e) { e.detail.period });

Open index.html to try it.

More free kits and custom work: https://animatedcreativity.com/
