Monthly/Yearly Pricing Toggle

<style>
.wpide-price-toggle{display:inline-flex;align-items:center;gap:.6em;font-weight:600;}
.wpide-price-toggle button{position:relative;width:52px;height:28px;border:0;border-radius:999px;background:#c3c4c7;cursor:pointer;transition:background .2s;}
.wpide-price-toggle button::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s;}
.wpide-price-toggle button[aria-checked="true"]{background:#2271b1;}
.wpide-price-toggle button[aria-checked="true"]::after{transform:translateX(24px);}
@media (prefers-reduced-motion: reduce){.wpide-price-toggle button,.wpide-price-toggle button::after{transition:none;}}
[data-wpide-period][hidden]{display:none!important;}
</style>
<script>
(function () {
    var holders = document.querySelectorAll('[data-wpide-price-toggle]');
    if (!holders.length) { return; }
    function apply(yearly) {
        document.querySelectorAll('[data-monthly][data-yearly]').forEach(function (el) {
            el.textContent = el.getAttribute(yearly ? 'data-yearly' : 'data-monthly');
        });
        document.querySelectorAll('[data-wpide-period]').forEach(function (el) {
            el.hidden = el.getAttribute('data-wpide-period') !== (yearly ? 'yearly' : 'monthly');
        });
        document.querySelectorAll('.wpide-price-toggle button').forEach(function (b) { b.setAttribute('aria-checked', yearly ? 'true' : 'false'); });
    }
    holders.forEach(function (holder) {
        holder.className += ' wpide-price-toggle';
        holder.innerHTML = '<span>Monthly</span><button type="button" role="switch" aria-checked="false" aria-label="Show yearly prices"></button><span>Yearly</span>';
        holder.querySelector('button').addEventListener('click', function () {
            apply(this.getAttribute('aria-checked') !== 'true');
        });
    });
    apply(false);
})();
</script>