Deelknop die uitklapt Nieuw

<!-- Deelknop die uitklapt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dku">
  <article class="dku__art"><span class="dku__k">Blog · ma 13 okt 2026 · 6 min</span><h4 class="dku__h">Zo kies je een warmtepomp voor een jaren-30 woning</h4>
    <div class="dku__share">
      <button class="dku__btn" type="button" aria-expanded="false" aria-controls="dku-opts"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="5" cy="10" r="2.2" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="15" cy="4.5" r="2.2" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="15" cy="15.5" r="2.2" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m7 9 6-3.4M7 11l6 3.4" stroke="currentColor" stroke-width="1.6"/></svg><span>Delen</span></button>
      <ul class="dku__opts" id="dku-opts" aria-label="Deelopties">
        <li style="--i:0"><button class="dku__o" type="button" data-a="copy" aria-label="Link kopiëren"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M8.5 11.5a3 3 0 0 0 4.2 0l3-3a3 3 0 0 0-4.2-4.2l-1 1M11.5 8.5a3 3 0 0 0-4.2 0l-3 3a3 3 0 0 0 4.2 4.2l1-1" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dku__tip">Kopieer link</span></button></li>
        <li style="--i:1"><a class="dku__o" data-a="wa" href="#" target="_blank" rel="noopener" aria-label="Delen via WhatsApp"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><path d="M10 3.2a6.8 6.8 0 0 0-5.9 10.2L3.2 16.8l3.5-.9A6.8 6.8 0 1 0 10 3.2Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M7.6 7.4c.2 2.3 2.1 4.6 4.9 5.2l.9-1.2-1.4-.8-.7.6c-.9-.4-1.7-1.2-2.1-2.1l.6-.7-.8-1.4Z" fill="currentColor"/></svg><span class="dku__tip">WhatsApp</span></a></li>
        <li style="--i:2"><a class="dku__o" data-a="li" href="#" target="_blank" rel="noopener" aria-label="Delen via LinkedIn"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M6.8 9v4.6M6.8 6.6v.1M9.6 13.6V9m0 2c0-1.2.8-2 1.8-2s1.6.7 1.6 2v2.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dku__tip">LinkedIn</span></a></li>
        <li style="--i:3"><a class="dku__o" data-a="mail" href="#" aria-label="Delen via e-mail"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><rect x="2.8" y="4.6" width="14.4" height="10.8" rx="1.6" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m3.4 5.4 6.6 5.3 6.6-5.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg><span class="dku__tip">Mail</span></a></li>
        <li style="--i:4" class="dku__more" hidden><button class="dku__o" type="button" data-a="native" aria-label="Meer deelopties van je toestel"><svg viewBox="0 0 20 20" width="16" height="16" aria-hidden="true"><circle cx="5" cy="10" r="1.4" fill="currentColor"/><circle cx="10" cy="10" r="1.4" fill="currentColor"/><circle cx="15" cy="10" r="1.4" fill="currentColor"/></svg><span class="dku__tip">Meer</span></button></li>
      </ul>
    </div>
  </article>
  <p class="dku__toast" role="status" aria-live="polite"></p>
</div>
</div>

/* Deelknop die uitklapt · NedDev · eigen werk. */
.dku{position:absolute;inset:0;display:flex;align-items:center;padding:16px 18px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif}
.dku__art{display:flex;flex-direction:column;gap:8px;max-width:100%}
.dku__k{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#5f5a54}
.dku__h{margin:0 0 6px;font:700 clamp(17px,4.6vw,21px)/1.15 'Switzer',sans-serif;letter-spacing:-.025em;max-width:18em}
.dku__share{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.dku__btn{appearance:none;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid #0a0a0a;border-radius:999px;background:#fff;color:#0a0a0a;font:600 13px 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s;flex:none}
.dku__btn:hover,.dku__btn[aria-expanded="true"]{background:#0a0a0a;color:#fff}
.dku__btn:focus-visible,.dku__o:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.dku__opts{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.dku__opts li{opacity:0;transform:translateX(-8px) scale(.85);visibility:hidden;transition:opacity .18s,transform .22s cubic-bezier(.3,1.4,.5,1),visibility 0s .22s;transition-delay:calc((4 - var(--i)) * 25ms)}
.dku__opts.is-open li{opacity:1;transform:none;visibility:visible;transition:opacity .18s,transform .26s cubic-bezier(.3,1.4,.5,1),visibility 0s;transition-delay:calc(var(--i) * 45ms)}
.dku__o{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid #d0cbc4;background:#fff;color:#0a0a0a;cursor:pointer;text-decoration:none;transition:border-color .16s,background-color .16s}
.dku__o:hover{border-color:#0a0a0a;background:#fff4ef}
.dku__tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,3px);white-space:nowrap;background:#0a0a0a;color:#fff;font:500 10px 'JetBrains Mono',monospace;padding:4px 6px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.dku__o:hover .dku__tip,.dku__o:focus-visible .dku__tip{opacity:1;transform:translate(-50%,0)}
.dku__o.is-ok{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.dku__toast{position:absolute;right:14px;bottom:12px;margin:0;font:500 11px 'JetBrains Mono',monospace;background:#0a0a0a;color:#fff;padding:6px 9px;border-radius:3px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.dku__toast.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.dku__opts li,.dku__opts.is-open li{transition:opacity .01s,visibility 0s;transform:none}}
@media (max-width:420px){.dku{padding:14px}.dku__o{width:32px;height:32px}.dku__btn{padding:8px 11px}.dku__opts{gap:4px}}

// Deelknop die uitklapt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.dku')||root;
var btn=root.querySelector('.dku__btn'),opts=root.querySelector('.dku__opts'),toast=root.querySelector('.dku__toast'),tt=0;
var uid='dku-'+Math.random().toString(36).slice(2,7);opts.id=uid;btn.setAttribute('aria-controls',uid);
var url='https://www.voorbeeld.nl/blog/warmtepomp-jaren-30-woning',title='Zo kies je een warmtepomp voor een jaren-30 woning';
root.querySelector('[data-a="wa"]').href='https://wa.me/?text='+encodeURIComponent(title+' '+url);
root.querySelector('[data-a="li"]').href='https://www.linkedin.com/sharing/share-offsite/?url='+encodeURIComponent(url);
root.querySelector('[data-a="mail"]').href='mailto:?subject='+encodeURIComponent(title)+'&body='+encodeURIComponent(url);
if(navigator.share)root.querySelector('.dku__more').hidden=false;
function set(o){opts.classList.toggle('is-open',o);btn.setAttribute('aria-expanded',String(o));}
function say(t){toast.textContent=t;toast.classList.add('is-on');clearTimeout(tt);tt=setTimeout(function(){toast.classList.remove('is-on');},1800);}
btn.addEventListener('click',function(){var o=btn.getAttribute('aria-expanded')!=='true';set(o);if(o)setTimeout(function(){opts.querySelector('.dku__o').focus({preventScroll:true});},60);});
root.addEventListener('keydown',function(e){if(e.key==='Escape'&&btn.getAttribute('aria-expanded')==='true'){set(false);btn.focus();}});
document.addEventListener('click',function(e){if(!root.contains(e.target))set(false);});
root.querySelector('[data-a="copy"]').addEventListener('click',function(){var b=this;var ok=function(){b.classList.add('is-ok');say('Link gekopieerd');setTimeout(function(){b.classList.remove('is-ok');},1500);};
  if(navigator.clipboard&&navigator.clipboard.writeText)navigator.clipboard.writeText(url).then(ok,function(){say('Kopiëren lukte niet, kopieer de adresbalk');});else say('Kopiëren lukte niet, kopieer de adresbalk');});
root.querySelector('[data-a="native"]').addEventListener('click',function(){navigator.share({title:title,url:url}).catch(function(){});});
}
init(document.querySelector('.jouw-container'));