Doelgroep-schakelaar particulier of ondernemer New
Section for a business with two audiences (accountancy, installer, cleaning): a Private or Business switch swaps heading, services with from-prices, deadline and contact person. Built on two real radio buttons (arrow keys work); the swap animates with View Transitions, the slider and content also work without JS via :has() (fallback: data attribute via JS). The choice is remembered per visitor in localStorage (try/catch).
Smit & De Boer Administratie · Zwolle
Je belastingaangifte goed geregeld, ook als het ingewikkeld wordtJe administratie op orde, zodat jij kunt ondernemen
- Aangifte inkomstenbelastingVoor loondienst en pensioen, inclusief controle op aftrekposten€ 95
- Aangifte met eigen woningHypotheekrente, WOZ en eigenwoningforfait goed verwerkt€ 145
- Toeslagen aanvragen en controlerenHuur-, zorg- en kinderopvangtoeslag, zodat je niet hoeft terug te betalen€ 45
- Aangifte erfbelastingNa een overlijden, in overleg met de notarisvanaf € 495
- Hulp bij een brief van de BelastingdienstBezwaar, betalingsregeling of een vraag om informatie€ 35 per kwartier
Goed om te weten
Aangifte over 2026 kan vanaf 1 maart 2027
Zet je jaaropgaven en WOZ-beschikking nu al klaar in ons klantportaal, dan ben je in maart in 20 minuten klaar.
- Boekhouding voor zzpBonnetjes via de app, wij boeken en sturen je elk kwartaal een overzichtvanaf € 65 p/m
- Btw-aangifte per kwartaalZit in elk boekhoudpakket, ook de ICP-opgaafinbegrepen
- Jaarrekening bvInclusief deponering bij de KvK en aangifte vennootschapsbelastingvanaf € 1.450
- LoonadministratieLoonstroken, aangifte loonheffingen en jaaropgaven€ 12,50 per strook
- StartersgesprekEenmanszaak of bv, KOR, urencriterium en wat je opzij moet zettengratis, 45 min
Deadline
Btw over het derde kwartaal: uiterlijk 31 oktober 2026
Klanten met een boekhoudpakket hoeven niets te doen. Nieuwe klanten nemen we nog aan tot 20 oktober.
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.
<!-- Doelgroep-schakelaar particulier of ondernemer · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dgs" data-doel="part">
<div class="dgs__in">
<div class="dgs__head">
<div>
<p class="dgs__kick">Smit & De Boer Administratie · Zwolle</p>
<h2 class="dgs__h"><span class="dgs__only-part">Je belastingaangifte goed geregeld, ook als het ingewikkeld wordt</span><span class="dgs__only-zak">Je administratie op orde, zodat jij kunt ondernemen</span></h2>
</div>
<div class="dgs__seg" role="radiogroup" aria-label="Ik ben">
<input type="radio" id="dgs-part" name="dgs-doel" value="part" checked><label for="dgs-part">Particulier</label>
<input type="radio" id="dgs-zak" name="dgs-doel" value="zak"><label for="dgs-zak">Ondernemer</label>
<span class="dgs__thumb" aria-hidden="true"></span>
</div>
</div>
<div class="dgs__body">
<div class="dgs__pane dgs__pane--part">
<ul class="dgs__list">
<li><a href="#"><b>Aangifte inkomstenbelasting</b><span>Voor loondienst en pensioen, inclusief controle op aftrekposten</span><em>€ 95</em></a></li>
<li><a href="#"><b>Aangifte met eigen woning</b><span>Hypotheekrente, WOZ en eigenwoningforfait goed verwerkt</span><em>€ 145</em></a></li>
<li><a href="#"><b>Toeslagen aanvragen en controleren</b><span>Huur-, zorg- en kinderopvangtoeslag, zodat je niet hoeft terug te betalen</span><em>€ 45</em></a></li>
<li><a href="#"><b>Aangifte erfbelasting</b><span>Na een overlijden, in overleg met de notaris</span><em>vanaf € 495</em></a></li>
<li><a href="#"><b>Hulp bij een brief van de Belastingdienst</b><span>Bezwaar, betalingsregeling of een vraag om informatie</span><em>€ 35 per kwartier</em></a></li>
</ul>
<div class="dgs__aside">
<div class="dgs__dl"><p class="dgs__dl-k">Goed om te weten</p><p class="dgs__dl-t">Aangifte over 2026 kan vanaf 1 maart 2027</p><p class="dgs__dl-p">Zet je jaaropgaven en WOZ-beschikking nu al klaar in ons klantportaal, dan ben je in maart in 20 minuten klaar.</p></div>
<div class="dgs__who"><span class="dgs__av" aria-hidden="true">LS</span><div><b>Linda Smit</b><span>Belastingadviseur, 14 jaar ervaring</span></div></div>
<a class="dgs__cta" href="#">Plan een gratis kennismaking</a>
</div>
</div>
<div class="dgs__pane dgs__pane--zak">
<ul class="dgs__list">
<li><a href="#"><b>Boekhouding voor zzp</b><span>Bonnetjes via de app, wij boeken en sturen je elk kwartaal een overzicht</span><em>vanaf € 65 p/m</em></a></li>
<li><a href="#"><b>Btw-aangifte per kwartaal</b><span>Zit in elk boekhoudpakket, ook de ICP-opgaaf</span><em>inbegrepen</em></a></li>
<li><a href="#"><b>Jaarrekening bv</b><span>Inclusief deponering bij de KvK en aangifte vennootschapsbelasting</span><em>vanaf € 1.450</em></a></li>
<li><a href="#"><b>Loonadministratie</b><span>Loonstroken, aangifte loonheffingen en jaaropgaven</span><em>€ 12,50 per strook</em></a></li>
<li><a href="#"><b>Startersgesprek</b><span>Eenmanszaak of bv, KOR, urencriterium en wat je opzij moet zetten</span><em>gratis, 45 min</em></a></li>
</ul>
<div class="dgs__aside">
<div class="dgs__dl"><p class="dgs__dl-k">Deadline</p><p class="dgs__dl-t">Btw over het derde kwartaal: uiterlijk 31 oktober 2026</p><p class="dgs__dl-p">Klanten met een boekhoudpakket hoeven niets te doen. Nieuwe klanten nemen we nog aan tot 20 oktober.</p></div>
<div class="dgs__who"><span class="dgs__av" aria-hidden="true">EB</span><div><b>Erik de Boer</b><span>Accountant-Administratieconsulent (AA)</span></div></div>
<a class="dgs__cta" href="#">Plan een gratis startersgesprek</a>
</div>
</div>
</div>
</div>
</div>
</div>/* Doelgroep-schakelaar particulier of ondernemer · NedDev · eigen werk. */
/* fonts (Fontshare): author@400,500,600,700 */
.dgs{--dgs-bg:#f3f5f4;--dgs-ink:#0f2228;--dgs-pet:#0f4c5c;--dgs-pet2:#14627a;--dgs-must:#e3a72f;--dgs-line:#d6dedd;--dgs-mut:#53646a;background:var(--dgs-bg);color:var(--dgs-ink);font-family:'Author',sans-serif;box-sizing:border-box}
.dgs *,.dgs *::before,.dgs *::after{box-sizing:border-box}
.dgs a:focus-visible{outline:2px solid var(--dgs-must);outline-offset:2px}
.dgs__in{max-width:1200px;margin:0 auto;padding:44px 32px 40px}
.dgs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:28px}
.dgs__kick{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--dgs-pet)}
.dgs__h{font-weight:700;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;margin:0;max-width:22ch}
.dgs__seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#fff;border:1px solid var(--dgs-line);border-radius:999px}
.dgs__seg input{position:absolute;opacity:0;width:1px;height:1px}
.dgs__seg label{position:relative;z-index:1;padding:11px 22px;text-align:center;font-weight:600;font-size:15px;cursor:pointer;border-radius:999px;color:var(--dgs-mut);transition:color .2s}
.dgs__seg label:hover{color:var(--dgs-ink)}
.dgs__seg input:checked+label{color:#fff}
.dgs__seg input:focus-visible+label{outline:2px solid var(--dgs-must);outline-offset:2px}
.dgs__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--dgs-pet);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.dgs[data-doel=zak] .dgs__thumb{transform:translateX(100%)}
.dgs:has(#dgs-zak:checked) .dgs__thumb{transform:translateX(100%)}
.dgs .dgs__only-zak,.dgs .dgs__pane--zak{display:none}
.dgs[data-doel=zak] .dgs__only-zak{display:inline}
.dgs[data-doel=zak] .dgs__only-part{display:none}
.dgs[data-doel=zak] .dgs__pane--zak{display:grid}
.dgs[data-doel=zak] .dgs__pane--part{display:none}
.dgs:has(#dgs-zak:checked) .dgs__only-zak{display:inline}
.dgs:has(#dgs-zak:checked) .dgs__only-part{display:none}
.dgs:has(#dgs-zak:checked) .dgs__pane--zak{display:grid}
.dgs:has(#dgs-zak:checked) .dgs__pane--part{display:none}
.dgs__body{view-transition-name:dgs-body}
.dgs__h{view-transition-name:dgs-kop}
.dgs__pane{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
.dgs__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--dgs-ink)}
.dgs__list a{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:15px 4px;border-bottom:1px solid var(--dgs-line);text-decoration:none;color:inherit;transition:background-color .16s,padding .16s}
.dgs__list a:hover{background:#fff;padding-left:12px;padding-right:12px}
.dgs__list b{font-size:17px;font-weight:600}
.dgs__list span{grid-column:1;font-size:14px;color:var(--dgs-mut);line-height:1.45}
.dgs__list em{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dgs__aside{display:grid;gap:12px}
.dgs__dl{background:#fff;border:1px solid var(--dgs-line);border-top:4px solid var(--dgs-must);padding:16px 18px}
.dgs__dl-k{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8a5f0e}
.dgs__dl-t{margin:0 0 6px;font-weight:700;font-size:17px;line-height:1.25}
.dgs__dl-p{margin:0;font-size:14px;line-height:1.5;color:var(--dgs-mut)}
.dgs__who{display:flex;gap:12px;align-items:center;padding:4px 2px}
.dgs__av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--dgs-pet);color:#fff;font-weight:700;font-size:14px}
.dgs__who b{display:block;font-size:15px}
.dgs__who span{font-size:13px;color:var(--dgs-mut)}
.dgs__cta{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;background:var(--dgs-ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;transition:background-color .16s}
.dgs__cta:hover{background:var(--dgs-pet)}
.dgs__cta:active{transform:translateY(1px)}
@supports (view-transition-name:none){
::view-transition-old(dgs-body),::view-transition-old(dgs-kop){animation:dgs-out .16s ease-in both}
::view-transition-new(dgs-body),::view-transition-new(dgs-kop){animation:dgs-in .3s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes dgs-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes dgs-in{from{opacity:0;transform:translateY(10px)}}
@media (max-width:900px){.dgs__in{padding:28px 16px}.dgs__head{flex-direction:column;align-items:stretch;gap:18px}.dgs__pane,.dgs[data-doel=zak] .dgs__pane--zak{grid-template-columns:1fr;gap:20px}.dgs__seg label{padding:10px 12px}}
@media (max-width:520px){.dgs__list a{grid-template-columns:1fr}.dgs__list em{grid-column:1;grid-row:auto;text-align:left;color:var(--dgs-pet);margin-top:4px}}
@media (prefers-reduced-motion:reduce){.dgs *{transition:none!important}}// Doelgroep-schakelaar particulier of ondernemer · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.dgs');if(!w)return;var KEY='dgs-doel';
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function set(v,anim){var fn=function(){w.setAttribute('data-doel',v);};if(anim&&document.startViewTransition&&!reduce)document.startViewTransition(fn);else fn();}
try{var s=localStorage.getItem(KEY);if(s==='zak'||s==='part'){w.querySelector('#dgs-'+s).checked=true;set(s,false);}}catch(e){}
w.addEventListener('change',function(e){if(e.target.name!=='dgs-doel')return;set(e.target.value,true);try{localStorage.setItem(KEY,e.target.value);}catch(err){}});
}
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 →