Boomstructuur voor documenten Nieuw

<!-- Boomstructuur voor documenten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bdt">
<p class="bdt__h" id="bdt-h">Documenten van Bakkerij Verbeek</p>
<ul class="bdt__tree" role="tree" aria-labelledby="bdt-h">
<li class="bdt__i" role="treeitem" aria-expanded="true"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Administratie 2026</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Kwartaal 3</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Btw-aangifte Q3.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Bankafschriften juli.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Inkoopfacturen</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Meelhandel De Molen 2026-118.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Energie september.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Kassaoverzicht september.xlsx</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Jaarstukken 2025</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Jaarrekening 2025.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Aangifte vennootschapsbelasting.pdf</span></span></li>
</ul></li>
<li class="bdt__i" role="treeitem" aria-expanded="false"><span class="bdt__row"><svg class="bdt__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 4h4l1.5 1.5H14V13H2z"/></svg><span class="bdt__lab">Loonadministratie</span></span>
<ul class="bdt__g" role="group">
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Loonstroken september.pdf</span></span></li>
<li class="bdt__i" role="treeitem"><span class="bdt__row"><svg class="bdt__ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2h5l3 3v9H4z"/></svg><span class="bdt__lab">Contract Ilse de Wit.pdf</span></span></li>
</ul></li>
</ul>
<p class="bdt__st" aria-live="polite">Kies een document met de pijltjes of klik erop.</p>
</div>
</div>

/* Boomstructuur voor documenten · NedDev · eigen werk. */
.bdt{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left}
.bdt *,.bdt *::before,.bdt *::after{box-sizing:border-box}
.bdt__h{margin:0;padding:12px 14px 8px;font:600 15px/1.2 'Switzer',sans-serif;border-bottom:1px solid rgba(10,10,10,.1)}
.bdt__tree,.bdt__g{list-style:none;margin:0;padding:0}
.bdt__tree{flex:1;min-height:0;overflow:auto;padding:6px 6px 6px;scrollbar-width:thin}
.bdt__i{outline:none}
.bdt__row{--lv:0;display:flex;align-items:center;gap:6px;min-height:28px;padding:0 8px 0 calc(6px + var(--lv) * 18px);border-radius:4px;font:400 14px/1.2 'Switzer',sans-serif;cursor:pointer;user-select:none;white-space:nowrap}
.bdt__lab{overflow:hidden;text-overflow:ellipsis}
.bdt__row:hover{background:#f4f3f1}
.bdt__i:focus-visible>.bdt__row{box-shadow:inset 0 0 0 2px #F5480F}
.bdt__i[aria-selected="true"]>.bdt__row{background:#0a0a0a;color:#fff}
.bdt__chev,.bdt__ic{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bdt__chev{transition:transform .18s ease}
.bdt__i:not([aria-expanded])>.bdt__row{padding-left:calc(26px + var(--lv) * 18px)}
.bdt__i[aria-expanded="true"]>.bdt__row .bdt__chev{transform:rotate(90deg)}
.bdt__i[aria-expanded="true"]>.bdt__row>.bdt__ic path{fill:#F5480F;stroke:#0a0a0a}
.bdt__i[aria-expanded="false"]>.bdt__g{display:none}
.bdt__i[aria-expanded="true"]>.bdt__g{animation:bdtOpen .2s ease}
@keyframes bdtOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bdt__st{margin:0;padding:8px 14px 10px;border-top:1px solid rgba(10,10,10,.1);font:400 13px/1.3 'Switzer',sans-serif;color:#57534e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.bdt__chev{transition:none}.bdt__i[aria-expanded="true"]>.bdt__g{animation:none}}

// Boomstructuur voor documenten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bdt');if(!w)return;
var tree=w.querySelector('.bdt__tree'),st=w.querySelector('.bdt__st');
var all=[].slice.call(w.querySelectorAll('.bdt__i'));
all.forEach(function(li){var lv=0,p=li.parentElement;while(p&&p!==tree){if(p.classList.contains('bdt__g'))lv++;p=p.parentElement;}
li.querySelector('.bdt__row').style.setProperty('--lv',lv);li.setAttribute('aria-label',li.querySelector('.bdt__lab').textContent);li.setAttribute('aria-level',lv+1);li.tabIndex=-1;});
all[0].tabIndex=0;
function lab(li){return li.querySelector('.bdt__lab').textContent;}
function visible(){return all.filter(function(li){var p=li.parentElement.closest('.bdt__i');while(p){if(p.getAttribute('aria-expanded')==='false')return false;p=p.parentElement.closest('.bdt__i');}return true;});}
function go(li){if(!li)return;all.forEach(function(o){o.tabIndex=-1;});li.tabIndex=0;li.focus();li.scrollIntoView({block:'nearest'});}
function isParent(li){return li.hasAttribute('aria-expanded');}
function toggle(li,open){if(!isParent(li))return;var o=open===undefined?li.getAttribute('aria-expanded')!=='true':open;li.setAttribute('aria-expanded',o?'true':'false');}
function pick(li){all.forEach(function(o){o.removeAttribute('aria-selected');});li.setAttribute('aria-selected','true');st.textContent='Geopend: '+lab(li);}
tree.addEventListener('click',function(e){var row=e.target.closest('.bdt__row');if(!row)return;var li=row.parentElement;go(li);if(isParent(li))toggle(li);else pick(li);});
tree.addEventListener('keydown',function(e){var li=e.target.closest('.bdt__i');if(!li)return;var v=visible(),i=v.indexOf(li),k=e.key,done=true;
if(k==='ArrowDown')go(v[i+1]);else if(k==='ArrowUp')go(v[i-1]);
else if(k==='ArrowRight'){if(isParent(li)){if(li.getAttribute('aria-expanded')==='false')toggle(li,true);else go(li.querySelector('.bdt__i'));}}
else if(k==='ArrowLeft'){if(isParent(li)&&li.getAttribute('aria-expanded')==='true')toggle(li,false);else go(li.parentElement.closest('.bdt__i'));}
else if(k==='Home')go(v[0]);else if(k==='End')go(v[v.length-1]);
else if(k==='Enter'||k===' '){if(isParent(li))toggle(li);else pick(li);}
else if(k==='*'){[].forEach.call(li.parentElement.children,function(s){toggle(s,true);});}
else if(k.length===1&&/\S/.test(k)){var c=k.toLowerCase(),n=v.slice(i+1).concat(v.slice(0,i+1)).find(function(o){return lab(o).toLowerCase().indexOf(c)===0;});go(n);}
else done=false;
if(done)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));