Deelknop die uitklapt New

A "Share" button unfolds four options with a stagger: copy link (with an aria-live message), WhatsApp, LinkedIn and mail. If the browser has navigator.share (mostly phones), a "More" option opens the device share sheet too. Esc or clicking outside closes; aria-expanded on the button. CSS transitions with a stagger, works everywhere.

Blog · ma 13 okt 2026 · 6 min

Zo kies je een warmtepomp voor een jaren-30 woning

How to use it

Paste the HTML where the buttons 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.

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

More buttons

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 →