Vergelijking: wij, zelf doen, groot bureau New

Comparison table "With us / Do it yourself / Large firm" with costs in euros, checks and crosses, and a business-type switch that updates the amounts. For service providers explaining their price.

Administratiekantoor Telgen · Deventer

Wat kost uw administratie echt?

Inclusief de uren die u er zelf in steekt, gerekend tegen € 60 per uur.

Met onsZelf doenGroot bureau

Vaste kosten per maand

Uw eigen tijd per maand

Btw-aangifte per kwartaal

Jaarrekening en aangifte inbegrepen

Vaste contactpersoon wisselt

Antwoord binnen 1 werkdag

Totaal per jaar, met uw tijd

Bedragen excl. btw. Groot bureau: gemiddelde van drie offertes, aangevraagd in augustus 2026.Vraag een vaste prijs aan

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.

<!-- Vergelijking: wij, zelf doen, groot bureau · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vwz">
  <div class="vwz__in">
    <div class="vwz__head">
      <div><span class="vwz__eye">Administratiekantoor Telgen · Deventer</span>
      <h2 class="vwz__h">Wat kost uw administratie echt?</h2>
      <p class="vwz__lead">Inclusief de uren die u er zelf in steekt, gerekend tegen € 60 per uur.</p></div>
      <div class="vwz__sw" role="radiogroup" aria-label="Bedrijfsvorm"><button type="button" role="radio" aria-checked="true" data-m="0">Eenmanszaak</button><button type="button" role="radio" aria-checked="false" data-m="1">BV</button></div>
    </div>
    <div class="vwz__t" role="table" aria-label="Vergelijking">
      <div class="vwz__r vwz__r--h" role="row"><span role="columnheader"></span><span role="columnheader" class="vwz__us">Met ons</span><span role="columnheader">Zelf doen</span><span role="columnheader">Groot bureau</span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Vaste kosten per maand</span><span role="cell" class="vwz__us" data-v="€ 95|€ 210"></span><span role="cell" data-v="€ 18 software|€ 35 software"></span><span role="cell" data-v="€ 240|€ 520"></span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Uw eigen tijd per maand</span><span role="cell" class="vwz__us" data-v="1 uur|1 uur"></span><span role="cell" data-v="8 tot 12 uur|12 tot 16 uur"></span><span role="cell" data-v="2 uur|2 uur"></span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Btw-aangifte per kwartaal</span><span role="cell" class="vwz__us"><i class="vwz__y" aria-label="ja"></i></span><span role="cell"><i class="vwz__n" aria-label="nee"></i></span><span role="cell"><i class="vwz__y" aria-label="ja"></i></span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Jaarrekening en aangifte</span><span role="cell" class="vwz__us"><i class="vwz__y" aria-label="ja"></i> inbegrepen</span><span role="cell"><i class="vwz__n" aria-label="nee"></i></span><span role="cell" data-v="+ € 950|+ € 1.850"></span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Vaste contactpersoon</span><span role="cell" class="vwz__us"><i class="vwz__y" aria-label="ja"></i></span><span role="cell"><i class="vwz__n" aria-label="nee"></i></span><span role="cell"><i class="vwz__n" aria-label="nee"></i> wisselt</span></div>
      <div class="vwz__r" role="row"><span role="rowheader">Antwoord binnen 1 werkdag</span><span role="cell" class="vwz__us"><i class="vwz__y" aria-label="ja"></i></span><span role="cell"><i class="vwz__n" aria-label="nee"></i></span><span role="cell"><i class="vwz__n" aria-label="nee"></i></span></div>
      <div class="vwz__r vwz__r--tot" role="row"><span role="rowheader">Totaal per jaar, met uw tijd</span><span role="cell" class="vwz__us" data-v="€ 1.860|€ 3.240"></span><span role="cell" data-v="€ 7.416|€ 10.500"></span><span role="cell" data-v="€ 5.270|€ 9.530"></span></div>
    </div>
    <div class="vwz__foot"><span>Bedragen excl. btw. Groot bureau: gemiddelde van drie offertes, aangevraagd in augustus 2026.</span><a href="#" class="vwz__cta">Vraag een vaste prijs aan</a></div>
  </div>
</div>
</div>

/* Vergelijking: wij, zelf doen, groot bureau · NedDev · eigen werk. */
.vwz{background:#1f2a5a;color:#eef1fb;font-family:'Switzer',sans-serif;box-sizing:border-box}
.vwz *{box-sizing:border-box}
.vwz__in{max-width:1080px;margin:0 auto;padding:40px 32px}
.vwz__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.vwz__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#3ddc97}
.vwz__h{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.025em;margin:8px 0 6px;line-height:1.05}
.vwz__lead{margin:0;font-size:14.5px;color:#b8c0de}
.vwz__sw{display:flex;background:#141c42;border-radius:999px;padding:4px}
.vwz__sw button{font:600 13.5px 'Switzer',sans-serif;color:#b8c0de;background:transparent;border:0;border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s,color .2s}
.vwz__sw button[aria-checked="true"]{background:#3ddc97;color:#141c42}
.vwz__sw button:focus-visible,.vwz__cta:focus-visible{outline:2px solid #3ddc97;outline-offset:2px}
.vwz__t{position:relative}
.vwz__r{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;border-bottom:1px solid rgba(238,241,251,.12)}
.vwz__r>span{padding:12px 14px;font-size:14.5px}
.vwz__r>span:first-child{padding-left:0;color:#d7dcef}
.vwz__r--h>span{font-weight:700;font-size:15px;padding-top:14px;padding-bottom:14px}
.vwz__us{background:#2a3770;color:#fff;font-weight:600}
.vwz__r--h .vwz__us{border-radius:6px 6px 0 0;background:#3ddc97;color:#141c42}
.vwz__r--tot{border-bottom:0}
.vwz__r--tot>span{font-size:17px;font-weight:800;padding-top:16px;padding-bottom:16px}
.vwz__r--tot .vwz__us{border-radius:0 0 6px 6px;color:#3ddc97}
.vwz__r--tot>span:first-child{font-weight:600;font-size:14.5px}
[data-v]{transition:opacity .2s}
.vwz__y,.vwz__n{display:inline-block;width:20px;height:20px;border-radius:50%;vertical-align:-5px;margin-right:4px;position:relative}
.vwz__y{background:#3ddc97}
.vwz__y::after{content:'';position:absolute;left:7px;top:3.5px;width:5px;height:10px;border:solid #141c42;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.vwz__n{background:rgba(238,241,251,.12)}
.vwz__n::before,.vwz__n::after{content:'';position:absolute;left:9px;top:5px;width:2px;height:10px;background:#ff8a7a;transform:rotate(45deg)}
.vwz__n::after{transform:rotate(-45deg)}
.vwz__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:12.5px;color:#9aa3c7}
.vwz__cta{background:#3ddc97;color:#141c42;text-decoration:none;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:3px;transition:background .2s}
.vwz__cta:hover{background:#fff}
@media(max-width:700px){.vwz__in{padding:28px 16px}.vwz__r{grid-template-columns:repeat(3,1fr)}.vwz__r>span:first-child{grid-column:1/-1;padding:12px 0 4px;font-size:12.5px;color:#9aa3c7}
.vwz__r--h>span:first-child{display:none}.vwz__r>span{padding:6px 8px 10px;font-size:13px}.vwz__r--h>span{font-size:13px;padding:10px 8px}.vwz__r--tot>span{font-size:14.5px}.vwz__r--tot>span:first-child{font-size:12.5px}
.vwz__r>span:first-child{background:none}.vwz__cta{width:100%;text-align:center}}

// Vergelijking: wij, zelf doen, groot bureau · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vwz');if(!w)return;
var cells=w.querySelectorAll('[data-v]'),btns=w.querySelectorAll('.vwz__sw button');
function set(m){btns.forEach(function(b,i){b.setAttribute('aria-checked',i===m?'true':'false');b.tabIndex=i===m?0:-1;});
 cells.forEach(function(c){var parts=c.getAttribute('data-v').split('|');c.style.opacity=0;setTimeout(function(){c.textContent=parts[m];c.style.opacity=1;},120);});}
btns.forEach(function(b,i){b.addEventListener('click',function(){set(i);});b.addEventListener('keydown',function(e){if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();set(1-i);btns[1-i].focus();}});});
cells.forEach(function(c){c.textContent=c.getAttribute('data-v').split('|')[0];});
}
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 →