Faq Accordion Reveal Editorial — Motion Lab

Veelgestelde vragen

Wat klanten meestal vragen.

Waarom kiezen voor jullie en niet een groot bureau?+

We werken met senioren, niet met juniors die opgeleid worden op jouw budget. Lagere overhead, scherpere keuzes.

Hoe meten jullie het effect van design op omzet?+

We koppelen elke pagina aan een KPI: pipeline, lead-volume of orderwaarde. Maandelijkse rapportage in jouw eigen taal.

Wat als wij al een huisstijl hebben?+

Mooi — we bouwen erop voort. We auditen het systeem, fixen wat lekt en houden wat werkt.

Werken jullie met een vaste prijs of uurtarief?+

Vaste prijs per fase. Jij weet altijd waar je staat, wij houden de scope strak.

Hoe lang duurt een gemiddeld traject?+

Tussen zes en twaalf weken, afhankelijk van scope. Eerste oplevering binnen tien werkdagen.

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: native <details> + height-tween + auto-demo cycle
import gsap from 'https://esm.sh/[email protected]';
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.querySelectorAll('details.efaq-item').forEach(d => d.open = true);
  return;
}
const items = Array.from(document.querySelectorAll('details.efaq-item'));
items.forEach(d => {
  const body = d.querySelector('.efaq-item__body');
  gsap.set(body, { height: 0, opacity: 0 });
  d.addEventListener('toggle', () => {
    if (d.open) gsap.fromTo(body, { height: 0, opacity: 0 }, { height: 'auto', opacity: 1, duration: 0.6, ease: 'expo.out' });
    else gsap.to(body, { height: 0, opacity: 0, duration: 0.4, ease: 'expo.in' });
  });
});
let i = 0;
setInterval(() => {
  items.forEach(it => { if (it.open) it.open = false; });
  items[i].open = true;
  i = (i + 1) % items.length;
}, 1500);

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: editorial FAQ list, 5 items -->
<section class="efaq">
  <header class="efaq__head">
    <span class="efaq__eyebrow">Veelgestelde vragen</span>
    <h2 class="efaq__title">Wat <em>klanten</em> meestal vragen.</h2>
  </header>
  <details class="efaq-item">
    <summary>Waarom kiezen voor jullie en niet een groot bureau?<span class="efaq-item__plus">+</span></summary>
    <div class="efaq-item__body"><p>We werken met senioren, niet met juniors die opgeleid worden op jouw budget.</p></div>
  </details>
  <details class="efaq-item">...</details>
  <details class="efaq-item">...</details>
  <details class="efaq-item">...</details>
  <details class="efaq-item">...</details>
</section>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: editorial — paper cream, Fraunces serif, hairline rules */
.efaq { background:#F4F1EB; color:#0A0A0A; padding:10vh 6vw; min-height:70vh; }
.efaq__inner { max-width:880px; margin:0 auto; }
.efaq__head { margin:0 0 4rem; }
.efaq__eyebrow { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(10,10,10,.55); }
.efaq__title { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2rem,4.5vw,3.6rem); line-height:1.05; letter-spacing:-.02em; margin:1rem 0 0; }
.efaq__title em { font-style:italic; color:rgba(10,10,10,.55); font-weight:300; }
.efaq-item { border-top:1px solid rgba(10,10,10,.16); padding:0; }
.efaq-item:last-of-type { border-bottom:1px solid rgba(10,10,10,.16); }
.efaq-item summary { list-style:none; cursor:pointer; padding:1.6rem 0; display:flex; justify-content:space-between; align-items:baseline; gap:2rem; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.1rem,1.8vw,1.45rem); }
.efaq-item summary::-webkit-details-marker { display:none; }
.efaq-item__plus { font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:rgba(10,10,10,.5); transition:transform .4s ease; }
.efaq-item[open] .efaq-item__plus { transform:rotate(45deg); }
.efaq-item__body { overflow:hidden; }
.efaq-item__body p { font-family:'Fraunces',serif; font-weight:300; font-size:1.02rem; line-height:1.7; color:rgba(10,10,10,.72); margin:0 0 1.6rem; max-width:56ch; font-style:italic; }