FAQ Accordion

<!-- FAQ Accordion · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="faq">
  <div class="faq__inner">
    <header class="faq__head"><span class="faq__eyebrow">/ veelgesteld</span><h2 class="faq__h2">Vragen vooraf.</h2></header>
    <div class="faq__list">
      <div class="faq__item"><button class="faq__q" aria-expanded="false">Hoe lang duurt een project?<span class="faq__ic"></span></button><div class="faq__a"><p>Een landingspagina staat vaak binnen twee weken live. Een complete bedrijfssite reken je op vier tot zes weken, afhankelijk van content en omvang.</p></div></div>
      <div class="faq__item"><button class="faq__q" aria-expanded="false">Wat kost het?<span class="faq__ic"></span></button><div class="faq__a"><p>We werken met heldere pakketten vanaf €950. Geen verborgen kosten, geen verrassingen. Je weet vooraf precies wat je krijgt.</p></div></div>
      <div class="faq__item"><button class="faq__q" aria-expanded="false">Doen jullie ook SEO?<span class="faq__ic"></span></button><div class="faq__a"><p>Ja. SEO zit standaard in elk project, gebaseerd op echte zoekdata. We bouwen niet alleen mooi, maar ook vindbaar.</p></div></div>
      <div class="faq__item"><button class="faq__q" aria-expanded="false">Wat na livegang?<span class="faq__ic"></span></button><div class="faq__a"><p>We monitoren 24/7, houden alles veilig en up-to-date en rapporteren maandelijks over je resultaten.</p></div></div>
    </div>
  </div>
</section>
</div>

/* FAQ Accordion · NedDev · eigen werk. */
.faq{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.faq__inner{max-width:900px;margin:0 auto;padding:48px 28px;box-sizing:border-box}
.faq__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.faq__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;margin:12px 0 28px;line-height:1}
.faq__item{border-top:1px solid rgba(10,10,10,.12)}
.faq__item:last-child{border-bottom:1px solid rgba(10,10,10,.12)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:0;cursor:pointer;text-align:left;padding:22px 0;font-family:'Switzer',sans-serif;font-weight:600;font-size:clamp(16px,2vw,20px);color:#0a0a0a}
.faq__ic{position:relative;flex:0 0 22px;width:22px;height:22px}
.faq__ic:before,.faq__ic:after{content:'';position:absolute;background:#F5480F;transition:transform .3s ease}
.faq__ic:before{top:10px;left:0;width:22px;height:2px}
.faq__ic:after{top:0;left:10px;width:2px;height:22px}
.faq__q[aria-expanded="true"] .faq__ic:after{transform:rotate(90deg)}
.faq__a{overflow:hidden;height:0;transition:height .35s cubic-bezier(.16,1,.3,1)}
.faq__a p{font-family:'Switzer',sans-serif;font-size:15px;line-height:1.6;color:#555;margin:0 0 22px;max-width:60ch}
@media(prefers-reduced-motion:reduce){.faq__a{transition:none}}

// FAQ Accordion · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.faq')||root;
var items=[].slice.call(root.querySelectorAll('.faq__item'));
items.forEach(function(it){var q=it.querySelector('.faq__q'),a=it.querySelector('.faq__a');
q.addEventListener('click',function(){var open=q.getAttribute('aria-expanded')==='true';
items.forEach(function(o){o.querySelector('.faq__q').setAttribute('aria-expanded','false');o.querySelector('.faq__a').style.height='0px';});
if(!open){q.setAttribute('aria-expanded','true');a.style.height=a.scrollHeight+'px';}});});
window.addEventListener('resize',function(){items.forEach(function(o){var q=o.querySelector('.faq__q'),a=o.querySelector('.faq__a');if(q.getAttribute('aria-expanded')==='true')a.style.height=a.scrollHeight+'px';});});
}
init(document.querySelector('.jouw-container'));