Prijzen met jaarkorting en add-ons New
Membership pricing with a month/year switch ("save 20%"), struck-through monthly price and savings badge on yearly billing, an add-on strip and a running total. Real radio and checkbox inputs; the button shows loading and success. Ready for an iDEAL checkout.
Klimkelder · boulderhal Utrecht-Zuilen
Lid worden
Alle prijzen inclusief 9% btw. Inschrijfkosten € 15,00 vervallen bij jaarbetaling. Betalen met iDEAL of automatische incasso.
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Prijzen met jaarkorting en add-ons · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pzk">
<div class="pzk__in">
<div class="pzk__head">
<div><p class="pzk__eyebrow">Klimkelder · boulderhal Utrecht-Zuilen</p><h2 class="pzk__h">Lid worden</h2></div>
<fieldset class="pzk__per"><legend class="pzk__vh">Betaalperiode</legend>
<label><input type="radio" name="pzk-per" value="m"><span>Per maand</span></label>
<label><input type="radio" name="pzk-per" value="j" checked><span>Per jaar <em>bespaar 20%</em></span></label>
</fieldset>
</div>
<fieldset class="pzk__plans"><legend class="pzk__vh">Kies een lidmaatschap</legend>
<label class="pzk__plan"><input type="radio" name="pzk-plan" value="dal"><span class="pzk__pn">Daluren</span><span class="pzk__pd">Ma t/m vr tot 16.00 uur en in het weekend na 19.00 uur</span><span class="pzk__price"><s class="pzk__old"></s><b class="pzk__now"></b><small>per maand</small></span><span class="pzk__save"></span><span class="pzk__bill"></span></label>
<label class="pzk__plan pzk__plan--pop"><input type="radio" name="pzk-plan" value="vrij" checked><span class="pzk__tag">Meest gekozen</span><span class="pzk__pn">Onbeperkt</span><span class="pzk__pd">Elke dag van 9.00 tot 23.00 uur, inclusief introductieles</span><span class="pzk__price"><s class="pzk__old"></s><b class="pzk__now"></b><small>per maand</small></span><span class="pzk__save"></span><span class="pzk__bill"></span></label>
<label class="pzk__plan"><input type="radio" name="pzk-plan" value="duo"><span class="pzk__pn">Duo</span><span class="pzk__pd">Onbeperkt voor twee personen op hetzelfde adres</span><span class="pzk__price"><s class="pzk__old"></s><b class="pzk__now"></b><small>per maand</small></span><span class="pzk__save"></span><span class="pzk__bill"></span></label>
</fieldset>
<fieldset class="pzk__adds"><legend class="pzk__al">Erbij nemen <span>maandelijks, altijd opzegbaar</span></legend>
<label class="pzk__add"><input type="checkbox" value="6" data-n="Huurschoenen"><span><b>Huurschoenen</b> onbeperkt</span><i>€ 6,00</i></label>
<label class="pzk__add"><input type="checkbox" value="3" data-n="Krijt"><span><b>Krijt</b> vrij uit de bak</span><i>€ 3,00</i></label>
<label class="pzk__add"><input type="checkbox" value="9" data-n="Yoga"><span><b>Yoga en mobiliteit</b> 2 lessen per week</span><i>€ 9,00</i></label>
<label class="pzk__add"><input type="checkbox" value="4" data-n="Kluisje"><span><b>Vast kluisje</b> met eigen slot</span><i>€ 4,00</i></label>
</fieldset>
<div class="pzk__sum">
<p class="pzk__tot" aria-live="polite"></p>
<button type="button" class="pzk__go"><span class="pzk__spin" aria-hidden="true"></span><span class="pzk__go-l">Word lid</span></button>
</div>
<p class="pzk__fine">Alle prijzen inclusief 9% btw. Inschrijfkosten € 15,00 vervallen bij jaarbetaling. Betalen met iDEAL of automatische incasso.</p>
</div>
</div>
</div>/* Prijzen met jaarkorting en add-ons · NedDev · eigen werk. */
/* fonts (Fontshare): cabinet-grotesk@500,700,800 + satoshi@400,500,700 */
.pzk{--ink:#1a1d1c;--mut:#5b605d;--chalk:#f2f0eb;--line:#d8d5cc;--for:#1f5c45;--for2:#174634;--lime:#d8e65a;background:var(--chalk);color:var(--ink);font-family:'Satoshi','Switzer',sans-serif;box-sizing:border-box}
.pzk *,.pzk *::before{box-sizing:border-box}
.pzk__in{max-width:1120px;margin:0 auto;padding:46px 32px 34px}
.pzk__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.pzk) fieldset{border:0;margin:0;padding:0;min-width:0}
.pzk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.pzk__eyebrow{margin:0 0 8px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--for)}
.pzk__h{margin:0;font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.02em}
.pzk__per{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.pzk__per label{position:relative;cursor:pointer}
.pzk__per input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pzk__per span{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-weight:700;font-size:14px;transition:background-color .18s ease,color .18s ease}
.pzk__per em{font-style:normal;font-size:12px;font-weight:700;color:var(--for);background:var(--lime);padding:2px 7px;border-radius:999px}
.pzk__per input:checked+span{background:var(--ink);color:#fff}
.pzk__per label:hover input:not(:checked)+span{background:var(--chalk)}
.pzk__per input:focus-visible+span{outline:3px solid var(--for);outline-offset:2px}
.pzk__plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pzk__plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;background:#fff;border:2px solid var(--line);border-radius:8px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.pzk__plan:hover{border-color:#a9a598}
.pzk__plan input{position:absolute;opacity:0;width:1px;height:1px}
.pzk__plan:has(input:checked){border-color:var(--for);box-shadow:0 0 0 1px var(--for)}
.pzk__plan:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.pzk__plan::after{content:'';position:absolute;top:20px;right:20px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:#fff}
.pzk__plan:has(input:checked)::after{border:6px solid var(--for)}
.pzk__tag{align-self:flex-start;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 7px;border-radius:3px;margin-bottom:2px}
.pzk__pn{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.01em}
.pzk__pd{font-size:13.5px;line-height:1.45;color:var(--mut);min-height:40px;padding-right:20px}
.pzk__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:8px}
.pzk__old{font-size:16px;color:var(--mut);font-variant-numeric:tabular-nums}
.pzk__old:empty{display:none}
.pzk__now{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pzk__price small{font-size:13px;color:var(--mut)}
.pzk__save{align-self:flex-start;font-size:12.5px;font-weight:700;color:var(--for2);background:var(--lime);padding:3px 8px;border-radius:3px}
.pzk__save:empty{display:none}
.pzk__bill{font-size:12.5px;color:var(--mut)}
.pzk__adds{margin-top:16px;display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px}
.pzk__al{float:left;display:flex;flex-direction:column;justify-content:center;padding:4px 10px;font-weight:700;font-size:14px;line-height:1.3}
.pzk__al span{font-weight:400;font-size:12px;color:var(--mut)}
.pzk__add{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px;line-height:1.3;transition:background-color .15s ease,border-color .15s ease}
.pzk__add:hover{background:var(--chalk)}
.pzk__add input{flex:none;width:18px;height:18px;accent-color:var(--for);margin:0}
.pzk__add input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pzk__add span{flex:1}
.pzk__add i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pzk__add:has(input:checked){border-color:var(--for);background:#eef3e6}
.pzk__sum{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:16px 20px;background:var(--ink);color:#fff;border-radius:8px}
.pzk__tot{margin:0;font-size:14.5px;line-height:1.45}
.pzk__tot b{font-family:'Cabinet Grotesk',sans-serif;font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.pzk__go{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border:0;border-radius:999px;background:var(--lime);color:var(--ink);font:800 15px 'Satoshi',sans-serif;cursor:pointer;transition:background-color .15s ease}
.pzk__go:hover{background:#e6f27a}
.pzk__go:active{transform:translateY(1px)}
.pzk__go:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pzk__go[aria-busy="true"]{cursor:progress;opacity:.8}
.pzk__go.is-ok{background:#fff}
.pzk__spin{display:none;width:15px;height:15px;border:2px solid rgba(26,29,28,.3);border-top-color:var(--ink);border-radius:50%;animation:pzk-spin .7s linear infinite}
.pzk__go[aria-busy="true"] .pzk__spin{display:inline-block}
@keyframes pzk-spin{to{transform:rotate(360deg)}}
.pzk__fine{margin:12px 0 0;font-size:12.5px;color:var(--mut)}
@media (max-width:900px){
.pzk__in{padding:32px 14px 26px}
.pzk__plans{grid-template-columns:1fr}
.pzk__pd{min-height:0}
.pzk__adds{grid-template-columns:1fr 1fr}
.pzk__al{grid-column:1/-1;float:none}
.pzk__now{font-size:34px}
}
@media (max-width:420px){.pzk__adds{grid-template-columns:1fr}.pzk__per span{padding:8px 11px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.pzk *{transition:none!important}}// Prijzen met jaarkorting en add-ons · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.pzk'); if(!w) return;
const P={dal:39,vrij:54,duo:96}, N={dal:'Daluren',vrij:'Onbeperkt',duo:'Duo'};
const eur=v=>'€ '+v.toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2});
const tot=w.querySelector('.pzk__tot'), go=w.querySelector('.pzk__go'), gl=w.querySelector('.pzk__go-l');
const per=()=>w.querySelector('input[name="pzk-per"]:checked').value;
const render=()=>{const yr=per()==='j';
w.querySelectorAll('.pzk__plan').forEach(c=>{const k=c.querySelector('input').value, m=P[k], now=yr?m*.8:m;
c.querySelector('.pzk__old').textContent=yr?eur(m):'';
c.querySelector('.pzk__now').textContent=eur(now);
c.querySelector('.pzk__save').textContent=yr?'Bespaar '+eur(m*12-now*12)+' per jaar':'';
c.querySelector('.pzk__bill').textContent=yr?eur(now*12)+' in één keer per jaar':'Maandelijks opzegbaar';});
const k=w.querySelector('input[name="pzk-plan"]:checked').value, base=yr?P[k]*.8:P[k];
const adds=[...w.querySelectorAll('.pzk__add input:checked')]; const a=adds.reduce((s,i)=>s+ +i.value,0);
tot.innerHTML=N[k]+(yr?' · jaar':' · maand')+(adds.length?' + '+adds.map(i=>i.dataset.n.toLowerCase()).join(', '):'')+'<br><b>'+eur(base+a)+'</b> per maand';
if(go.classList.contains('is-ok')){go.classList.remove('is-ok'); gl.textContent='Word lid';}
};
w.addEventListener('change',render);
go.addEventListener('click',()=>{if(go.getAttribute('aria-busy')==='true') return; go.classList.remove('is-ok'); go.setAttribute('aria-busy','true'); gl.textContent='Even geduld...';
setTimeout(()=>{go.removeAttribute('aria-busy'); go.classList.add('is-ok'); gl.textContent='Gelukt, door naar iDEAL'; tot.insertAdjacentHTML('beforeend','<br><span>Uw keuze is bewaard. U betaalt in de volgende stap.</span>');},900);});
render();
}
init(document.querySelector('.jouw-container'));More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →