Vergelijking: wij, zelf doen, groot bureau Nieuw

Vergelijkingstabel "Met ons / Zelf doen / Groot bureau" met kosten in euro's, vinkjes en kruisjes, en een schakelaar per bedrijfsvorm die de bedragen bijwerkt. Voor dienstverleners die hun prijs willen uitleggen.

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

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- 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'));

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →