Multi Accordion

<!-- Multi Accordion · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="acc"><div class="acc-item"><button class="acc-hd">Wat is NedDev?<span class="acc-ic"></span></button><div class="acc-bd"><p>Een studio die snelle, gepolijste sites en SaaS bouwt.</p></div></div><div class="acc-item"><button class="acc-hd">Welke stack?<span class="acc-ic"></span></button><div class="acc-bd"><p>Next.js, Laravel en Tailwind op eigen infra.</p></div></div><div class="acc-item"><button class="acc-hd">Hoe snel live?<span class="acc-ic"></span></button><div class="acc-bd"><p>Vaak binnen enkele dagen, afhankelijk van scope.</p></div></div></div>
</div>

/* Multi Accordion · NedDev · eigen werk. */
.acc{width:340px;display:flex;flex-direction:column;gap:8px;font-family:'Switzer',sans-serif}
.acc-item{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;overflow:hidden}
.acc-hd{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border:0;background:none;font-size:13px;font-weight:600;color:#0a0a0a;cursor:pointer;text-align:left}
.acc-ic{position:relative;width:13px;height:13px;flex:none}
.acc-ic::before,.acc-ic::after{content:'';position:absolute;background:#F5480F;border-radius:2px;transition:transform .3s}
.acc-ic::before{left:0;top:5.5px;width:13px;height:2px}.acc-ic::after{left:5.5px;top:0;width:2px;height:13px}
.acc-item.open .acc-ic::after{transform:scaleY(0)}
.acc-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.acc-item.open .acc-bd{grid-template-rows:1fr}
.acc-bd>p{overflow:hidden;margin:0;padding:0 15px;font-size:12px;color:rgba(10,10,10,.6);line-height:1.6}
.acc-item.open .acc-bd>p{padding-bottom:14px}

// Multi Accordion · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.acc')||root;root.querySelectorAll('.acc-hd').forEach(function(h){h.addEventListener('click',function(){h.parentElement.classList.toggle('open');});});
}
init(document.querySelector('.jouw-container'));