Kennisbank met zijbalk en scroll-spy Nieuw

<!-- Kennisbank met zijbalk en scroll-spy · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kbn">
<nav class="kbn__side" aria-label="Kennisbank Kasboek">
<label class="kbn__vh" for="kbn-zoek">Zoek in de kennisbank</label>
<input class="kbn__q" id="kbn-zoek" type="search" placeholder="Zoeken" autocomplete="off">
<p class="kbn__vh kbn__count" aria-live="polite"></p>
<div class="kbn__groups">
<details class="kbn__g"><summary class="kbn__s">Aan de slag</summary><ul class="kbn__ul"><li><a class="kbn__a" href="#kennisbank-navigatie">Account aanmaken</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Bedrijfsgegevens en KvK</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Bank koppelen</a></li></ul></details>
<details class="kbn__g" open><summary class="kbn__s">Facturen</summary><ul class="kbn__ul">
<li><a class="kbn__a is-cur" href="#kennisbank-navigatie" aria-current="page">Facturen versturen</a>
<ul class="kbn__toc">
<li><a class="kbn__t" href="#kbn-s1">Factuur aanmaken</a></li>
<li><a class="kbn__t" href="#kbn-s2">Btw instellen</a></li>
<li><a class="kbn__t" href="#kbn-s3">Betaallink met iDEAL</a></li>
<li><a class="kbn__t" href="#kbn-s4">Herinneringen</a></li>
</ul></li>
<li><a class="kbn__a" href="#kennisbank-navigatie">Creditfactuur maken</a></li></ul></details>
<details class="kbn__g"><summary class="kbn__s">Btw-aangifte</summary><ul class="kbn__ul"><li><a class="kbn__a" href="#kennisbank-navigatie">Kwartaalaangifte doen</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Kleineondernemersregeling</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Btw verleggen</a></li></ul></details>
<details class="kbn__g"><summary class="kbn__s">Koppelingen</summary><ul class="kbn__ul"><li><a class="kbn__a" href="#kennisbank-navigatie">Mollie</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Shopify</a></li><li><a class="kbn__a" href="#kennisbank-navigatie">Exact Online</a></li></ul></details>
</div>
<div class="kbn__empty" hidden><p>Niets gevonden.</p><button class="kbn__clear" type="button">Wis zoekterm</button></div>
</nav>
<article class="kbn__art" tabindex="0" aria-label="Artikel: Facturen versturen">
<h3 class="kbn__h">Facturen versturen</h3>
<p class="kbn__lead">Zo maak en verstuur je een factuur vanuit Kasboek, inclusief betaallink.</p>
<h4 class="kbn__h4" id="kbn-s1" tabindex="-1">Factuur aanmaken</h4>
<p>Kies Facturen en dan Nieuwe factuur. Je klantgegevens en het volgende factuurnummer vullen zich vanzelf in. Voeg regels toe met omschrijving, aantal en prijs.</p>
<h4 class="kbn__h4" id="kbn-s2" tabindex="-1">Btw instellen</h4>
<p>Per regel kies je 21%, 9% of 0%. Lever je aan een bedrijf in een ander EU-land, kies dan btw verlegd en vul het btw-nummer van de klant in.</p>
<h4 class="kbn__h4" id="kbn-s3" tabindex="-1">Betaallink met iDEAL</h4>
<p>Zet Betaallink toevoegen aan. Je klant betaalt dan direct met iDEAL en de factuur staat automatisch op betaald zodra het geld binnen is.</p>
<h4 class="kbn__h4" id="kbn-s4" tabindex="-1">Herinneringen</h4>
<p>Na 14 dagen stuurt Kasboek een vriendelijke herinnering, na 28 dagen een tweede. Je past de teksten en termijnen aan onder Instellingen.</p>
<p class="kbn__help">Kom je er niet uit? Mail naar hulp@voorbeeld.nl, we antwoorden binnen een werkdag.</p>
</article>
</div>
</div>

/* Kennisbank met zijbalk en scroll-spy · NedDev · eigen werk. */
.kbn{position:absolute;inset:0;display:flex;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;interpolate-size:allow-keywords}
.kbn *,.kbn *::before,.kbn *::after{box-sizing:border-box}
.kbn__vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kbn__side{flex:0 0 clamp(124px,38cqi,190px);display:flex;flex-direction:column;gap:8px;padding:10px 8px 10px 12px;background:#f4f3f1;border-right:1px solid #e4e2de;overflow-y:auto;scrollbar-width:thin}
.kbn__q{width:100%;height:30px;margin:0;padding:0 8px;border:1px solid #cfccc7;border-radius:4px;background:#fff;font:400 12.5px 'Switzer',sans-serif;color:#0a0a0a;transition:border-color .16s}
.kbn__q:hover{border-color:#8a8781}
.kbn__q:focus-visible{outline:2px solid #F5480F;outline-offset:1px;border-color:#0a0a0a}
.kbn__groups{display:flex;flex-direction:column;gap:2px}
.kbn__s{display:flex;align-items:center;gap:6px;padding:4px 2px;border-radius:4px;font:600 12.5px/1.3 'Switzer',sans-serif;cursor:pointer;list-style:none}
.kbn__s::-webkit-details-marker{display:none}
.kbn__s::before{content:'';flex:none;width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .16s}
.kbn__g[open]>.kbn__s::before{transform:rotate(90deg)}
.kbn__s:hover{color:#b8330a}
.kbn__s:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.kbn__ul,.kbn__toc{list-style:none;margin:0;padding:0}
.kbn__ul{padding:2px 0 6px 11px}
.kbn__toc{margin:2px 0 4px 2px;border-left:1px solid #cfccc7}
.kbn__a,.kbn__t{display:block;padding:3px 4px;border-radius:4px;font:400 12px/1.3 'Switzer',sans-serif;color:#3d3b38;text-decoration:none;transition:color .15s,background-color .15s}
.kbn__a:hover,.kbn__t:hover{color:#0a0a0a;background:#e9e7e3}
.kbn__a:focus-visible,.kbn__t:focus-visible{outline:2px solid #F5480F;outline-offset:0}
.kbn__a.is-cur{color:#0a0a0a;font-weight:600}
.kbn__t{padding-left:8px;margin-left:-1px;border-left:2px solid transparent;border-radius:0 4px 4px 0;color:#5c5a57}
.kbn__t[aria-current="true"]{color:#0a0a0a;font-weight:600;border-left-color:#F5480F}
.kbn__empty{font:400 12px/1.4 'Switzer',sans-serif;color:#4a4845}
.kbn__empty p{margin:0 0 4px}
.kbn__empty[hidden]{display:none}
.kbn__clear{margin:0;padding:0;border:0;background:none;color:#0a0a0a;font:500 12px 'Switzer',sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.kbn__clear:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kbn__art{position:relative;flex:1;min-width:0;overflow-y:auto;padding:12px 16px 45cqh;scrollbar-width:thin;outline:none}
.kbn__art:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.kbn__h{margin:0 0 4px;font:700 clamp(16px,4.6cqi,22px)/1.15 'Switzer',sans-serif;letter-spacing:-.02em}
.kbn__lead{margin:0 0 6px;font:400 13px/1.45 'Switzer',sans-serif;color:#4a4845}
.kbn__h4{margin:14px 0 4px;font:600 14px/1.25 'Switzer',sans-serif;outline:none}
.kbn__h4:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kbn__art p{margin:0;font:400 13px/1.5 'Switzer',sans-serif;color:#3d3b38}
.kbn__art .kbn__help{margin-top:16px;padding-top:10px;border-top:1px solid #e4e2de;color:#5c5a57}
@supports selector(::details-content){.kbn__g::details-content{block-size:0;overflow:hidden;transition:block-size .2s ease,content-visibility .2s allow-discrete}.kbn__g[open]::details-content{block-size:auto}}
@media (prefers-reduced-motion:reduce){.kbn__g::details-content{transition:none}.kbn__s::before{transition:none}}

// Kennisbank met zijbalk en scroll-spy · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kbn');if(!w)return;
var art=w.querySelector('.kbn__art'),toc=[].slice.call(w.querySelectorAll('.kbn__t')),heads=toc.map(function(a){return w.querySelector(a.getAttribute('href'));});
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
var lock=null;['wheel','touchstart','keydown'].forEach(function(ev){art.addEventListener(ev,function(){lock=null;},{passive:true});});
function spy(){var y=art.scrollTop+art.clientHeight*.3,k=0;heads.forEach(function(h,j){if(h.offsetTop<=y)k=j;});if(lock!==null)k=lock;
toc.forEach(function(a,j){if(j===k)a.setAttribute('aria-current','true');else a.removeAttribute('aria-current');});}
var tick=false;art.addEventListener('scroll',function(){if(!tick){tick=true;requestAnimationFrame(function(){tick=false;spy();});}},{passive:true});
toc.forEach(function(a,j){a.addEventListener('click',function(e){e.preventDefault();lock=j;spy();art.scrollTo({top:heads[j].offsetTop-10,behavior:rm?'auto':'smooth'});heads[j].focus({preventScroll:true});});});
[].forEach.call(w.querySelectorAll('.kbn__a'),function(a){a.addEventListener('click',function(e){e.preventDefault();});});
var q=w.querySelector('.kbn__q'),groups=[].slice.call(w.querySelectorAll('.kbn__g')),empty=w.querySelector('.kbn__empty'),cnt=w.querySelector('.kbn__count');
var openState=groups.map(function(g){return g.open;});
function filt(){var t=q.value.trim().toLowerCase(),total=0;
groups.forEach(function(g,gi){var hits=0;[].forEach.call(g.querySelectorAll('.kbn__ul>li'),function(li){var m=!t||li.textContent.toLowerCase().indexOf(t)>-1;li.hidden=!m;if(m)hits++;});
g.hidden=!!t&&!hits;g.open=t?hits>0:openState[gi];total+=hits;});
empty.hidden=!t||total>0;cnt.textContent=t?(total?total+(total===1?' artikel gevonden':' artikelen gevonden'):'Geen artikelen gevonden'):'';}
q.addEventListener('input',filt);
groups.forEach(function(g,gi){g.addEventListener('toggle',function(){if(!q.value.trim())openState[gi]=g.open;});});
w.querySelector('.kbn__clear').addEventListener('click',function(){q.value='';filt();q.focus();});
spy();
}
init(document.querySelector('.jouw-container'));