# Monthly/Yearly Pricing Toggle

> Adds a switch that flips prices on your pricing page between monthly and yearly amounts, using simple data attributes on any element that shows a price.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: pricing, toggle, javascript
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-pricing-period-toggle/

## Code

```html
<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>
```

## Notes

Add a Custom HTML block with <div data-wpide-price-toggle></div> where the switch should appear, and give price elements data-monthly="$19" data-yearly="$190" (Custom HTML or the block's HTML editing).

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Monthly/Yearly Pricing Toggle" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/