Veelgestelde vragen · Kinderopvang De Wilgenhoek, Zwolle New

FAQ page for a childcare centre with three locations: search with highlighted matches, categories, questions that really expand, a map of Zwolle where you pick your own location so only that building's answers remain, and a question form that pre-fills your search terms when nothing is found. Photos are black and white and turn to colour as you open the question.

View full screen ↗

Planning bereikbaar op werkdagen van 8:00 tot 17:00

038 123 4567

Vragen van ouders

Alles wat ouders ons het vaakst vragen, van de wachtlijst tot koorts op de groep. Zoek op een woord, of kies op de kaart je locatie.

Zoek in de vragen

19 vragen in 6 onderwerpen

Tik op je locatie. Dan zie je alleen de antwoorden die voor dat huis gelden.

Aanmelden en wachtlijst

Kosten en toeslag

Wennen

Een vader brengt zijn dochter, de pedagogisch medewerker begroet haar bij de deur

In de week voor de start komt je kind twee ochtenden wennen. De eerste ochtend blijf je het eerste uur zelf op de groep, de tweede ochtend neem je na tien minuten afscheid. De medewerker die je kind wenning geeft, is ook de vaste mentor.

Een dag bij ons

Eten en slapen

Ziek zijn

Marieke van de planning aan haar bureau in Assendorp

Staat je vraag er niet bij?

Stel hem aan Marieke van de planning. Je krijgt binnen één werkdag antwoord per mail, en vaak zetten we de vraag daarna ook op deze pagina. Liever bellen: 038 123 4567.

Drie huizen in Zwolle

De oude boerderij in Berkum met grote tuin en speelhuisje — **Berkum**, Berkumerweg 88. Een oude boerderij met een boomgaard en vier groepen.

Het nieuwe lage bakstenen gebouw in Stadshagen met een bakfiets ervoor — **Stadshagen**, Frankhuizerallee 41. Nieuwbouw uit 2021, zes groepen.

Het bakstenen schoolgebouw uit de jaren dertig in Assendorp — **Assendorp**, Van Karnebeekstraat 12. Een oude school met hoge ramen, vijf groepen.

How to use it

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

<!-- Veelgestelde vragen · Kinderopvang De Wilgenhoek, Zwolle · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="wgh">
<div class="wgh__top"><div class="wgh__in wgh__top-in">
  <p class="wgh__top-txt">Planning bereikbaar op werkdagen van 8:00 tot 17:00</p>
  <p class="wgh__top-txt"><a href="tel:0381234567">038 123 4567</a></p>
</div></div>

<div class="wgh__head" role="banner"><div class="wgh__in wgh__head-in">
  <a href="#" class="wgh__logo" aria-label="Kinderopvang De Wilgenhoek, naar home">De Wilgenhoek</a>
  <nav class="wgh__nav" aria-label="Hoofdmenu">
    <a href="#">Locaties</a><a href="#">Dagopvang</a><a href="#">Bso</a><a href="#">Kosten</a><a href="#" aria-current="page">Vragen</a><a href="#">Werken bij</a>
  </nav>
  <a href="#" class="wgh__btn wgh__btn--head">Rondleiding plannen</a>
  <button class="wgh__menu-knop" type="button" aria-expanded="false" aria-controls="wgh-menu" aria-label="Menu openen"><span></span><span></span></button>
</div>
<div class="wgh__menu" id="wgh-menu" hidden>
  <a href="#">Locaties</a><a href="#">Dagopvang</a><a href="#">Bso</a><a href="#">Kosten</a><a href="#" aria-current="page">Vragen</a><a href="#">Werken bij</a><a href="#" class="wgh__btn">Rondleiding plannen</a>
</div>
</div>

<div class="wgh__hero"><div class="wgh__in wgh__hero-in">
  <div class="wgh__hero-txt">
    <h1 class="wgh__h1">Vragen van ouders</h1>
    <p class="wgh__lead">Alles wat ouders ons het vaakst vragen, van de wachtlijst tot koorts op de groep. Zoek op een woord, of kies op de kaart je locatie.</p>
    <label class="wgh__zoek"><span class="wgh__sr">Zoek in de vragen</span>
      <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="M15.5 15.5L21 21" stroke="currentColor" stroke-width="2"/></svg>
      <input type="search" class="wgh__zoek-in" placeholder="Bijvoorbeeld ziek, wennen of toeslag" autocomplete="off">
    </label>
    <p class="wgh__stand" aria-live="polite">19 vragen in 6 onderwerpen</p>
  </div>
  <div class="wgh__kaart">
    <svg class="wgh__kaart-svg" viewBox="0 0 520 440" aria-hidden="true">
      <path d="M0 330 C90 300 150 360 230 352 C300 345 330 400 420 410 C470 415 500 400 520 396" fill="none" stroke="#E8BDB2" stroke-width="34"/>
      <path d="M150 0 C170 80 205 120 222 190 C232 232 246 262 262 300 C272 324 284 340 300 352" fill="none" stroke="#E8BDB2" stroke-width="18"/>
      <path d="M520 120 C450 130 400 110 352 128 C300 148 250 140 214 160" fill="none" stroke="#E8BDB2" stroke-width="12"/>
      <path d="M262 200 L286 214 L314 206 L316 236 L338 252 L312 266 L310 296 L284 284 L258 300 L250 270 L226 256 L248 238 Z" fill="#FBE6E0" stroke="#653D37" stroke-width="1.5"/>
      <path d="M60 230 C120 120 250 70 360 90 C450 106 500 200 470 280 C440 360 330 392 220 380 C120 370 40 320 60 230 Z" fill="none" stroke="#653D37" stroke-width="1.2" stroke-dasharray="4 6"/>
      <text x="282" y="320" font-size="13" fill="#653D37" text-anchor="middle">binnenstad</text>
      <text x="112" y="356" font-size="13" fill="#653D37">IJssel</text>
      <text x="160" y="40" font-size="13" fill="#653D37">Zwarte Water</text>
      <text x="440" y="108" font-size="13" fill="#653D37">Vecht</text>
    </svg>
    <button type="button" class="wgh__pin" data-loc="stadshagen" style="left:24%;top:30%" aria-pressed="false"><span class="wgh__pin-stip" aria-hidden="true"></span>Stadshagen</button>
    <button type="button" class="wgh__pin" data-loc="assendorp" style="left:50%;top:73%" aria-pressed="false"><span class="wgh__pin-stip" aria-hidden="true"></span>Assendorp</button>
    <button type="button" class="wgh__pin" data-loc="berkum" style="left:64%;top:44%" aria-pressed="false"><span class="wgh__pin-stip" aria-hidden="true"></span>Berkum</button>
    <p class="wgh__kaart-uitleg">Tik op je locatie. Dan zie je alleen de antwoorden die voor dat huis gelden.</p>
  </div>
</div></div>

<div class="wgh__balk"><div class="wgh__in wgh__balk-in" role="group" aria-label="Onderwerpen">
  <button type="button" class="wgh__cat" data-cat="alle" aria-pressed="true">Alles</button>
  <button type="button" class="wgh__cat" data-cat="aanmelden" aria-pressed="false">Aanmelden en wachtlijst</button>
  <button type="button" class="wgh__cat" data-cat="kosten" aria-pressed="false">Kosten en toeslag</button>
  <button type="button" class="wgh__cat" data-cat="wennen" aria-pressed="false">Wennen</button>
  <button type="button" class="wgh__cat" data-cat="dag" aria-pressed="false">Een dag bij ons</button>
  <button type="button" class="wgh__cat" data-cat="eten" aria-pressed="false">Eten en slapen</button>
  <button type="button" class="wgh__cat" data-cat="ziek" aria-pressed="false">Ziek zijn</button>
</div></div>

<div class="wgh__vragen"><div class="wgh__in wgh__vragen-in">
  <p class="wgh__locmelding" hidden><span></span> <button type="button" class="wgh__locweg">Alle locaties tonen</button></p>

  <div class="wgh__groep" data-cat="aanmelden">
    <h2 class="wgh__h2">Aanmelden en wachtlijst</h2>
    <div class="wgh__v" data-loc="1"><h3 class="wgh__q"><button type="button" aria-expanded="false">Hoe lang is de wachtlijst?</button></h3><div class="wgh__a" hidden>
      <p>Dat verschilt per huis en per groep. Dit is de stand van oktober 2026:</p>
      <p data-l="stadshagen"><strong>Stadshagen:</strong> de babygroep zit vol tot april 2027. Op de dreumesgroep is vanaf januari plek op dinsdag en donderdag.</p>
      <p data-l="assendorp"><strong>Assendorp:</strong> reken op zes tot negen maanden voor de babygroep. Voor kinderen vanaf twee jaar is er meestal binnen drie maanden plek.</p>
      <p data-l="berkum"><strong>Berkum:</strong> direct plek op woensdag en vrijdag, op alle groepen.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Vanaf wanneer kan ik mijn kind inschrijven?</button></h3><div class="wgh__a" hidden>
      <p>Zodra je weet dat je zwanger bent. Inschrijven is gratis en je zit nergens aan vast tot je het contract tekent. Hoe eerder je inschrijft, hoe meer kans op de dagen die je wilt.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Kan ik dagen ruilen of een extra dag afnemen?</button></h3><div class="wgh__a" hidden>
      <p>Ruilen kan binnen vier weken, als er op de groep ruimte is. Een losse extra dag vraag je aan in de ouderapp; je hoort uiterlijk de dag ervoor of het past. Een extra dag kost hetzelfde uurtarief.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Wat is de opzegtermijn?</button></h3><div class="wgh__a" hidden>
      <p>Eén maand, op elke dag van de maand. Gaat je kind naar de basisschool, dan stopt de dagopvang vanzelf op de dag voor de vierde verjaardag.</p></div></div>
  </div>

  <div class="wgh__groep" data-cat="kosten">
    <h2 class="wgh__h2">Kosten en toeslag</h2>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Wat kost een dag opvang?</button></h3><div class="wgh__a" hidden>
      <p>Onze uurprijs voor dagopvang is in 2026 € 10,48. Een hele dag van 7:30 tot 18:30 is elf uur, dus € 115,28. Een halve dag van vijf uur kost € 52,40. Luiers, fruit, brood en de warme snack zitten erbij.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Krijg ik kinderopvangtoeslag?</button></h3><div class="wgh__a" hidden>
      <p>Als jullie allebei werken, studeren of een traject naar werk volgen, wel. Alle drie onze huizen staan in het Landelijk Register Kinderopvang. Hoeveel je terugkrijgt hangt af van je inkomen; bij de meeste ouders is het tussen 70 en 96 procent. Vraag de toeslag aan binnen drie maanden na de eerste opvangdag.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Betaal ik ook in de vakanties?</button></h3><div class="wgh__a" hidden>
      <p>Dat kies je zelf. Met het pakket van 52 weken betaal je elke maand hetzelfde en mag je altijd komen. Met het pakket van 48 weken ben je vier weken in de schoolvakanties vrij; de uurprijs is dan € 10,92.</p></div></div>
  </div>

  <div class="wgh__groep" data-cat="wennen">
    <h2 class="wgh__h2">Wennen</h2>
    <div class="wgh__v is-open"><h3 class="wgh__q"><button type="button" aria-expanded="true">Hoe gaat het wennen?</button></h3><div class="wgh__a">
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-5.webp" alt="Een vader brengt zijn dochter, de pedagogisch medewerker begroet haar bij de deur" width="900" height="491" loading="lazy"></figure>
      <p>In de week voor de start komt je kind twee ochtenden wennen. De eerste ochtend blijf je het eerste uur zelf op de groep, de tweede ochtend neem je na tien minuten afscheid. De medewerker die je kind wenning geeft, is ook de vaste mentor.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Mag ik overdag bellen hoe het gaat?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-6.webp" alt="Een pedagogisch medewerker leest drie peuters voor op de bank" width="900" height="491" loading="lazy"></figure>
      <p>Altijd. Na de lunch is het rustig, dan heeft de groep het meeste tijd. In de ouderapp zet de groep elke dag een paar foto's en een kort verslag van wat je kind heeft gedaan, gegeten en geslapen.</p></div></div>
  </div>

  <div class="wgh__groep" data-cat="dag">
    <h2 class="wgh__h2">Een dag bij ons</h2>
    <div class="wgh__v" data-loc="1"><h3 class="wgh__q"><button type="button" aria-expanded="false">Hoe laat breng en haal ik mijn kind?</button></h3><div class="wgh__a" hidden>
      <p>Brengen tussen opening en 9:30, halen vanaf 16:00. Na 9:30 begint de groep aan het ochtendprogramma.</p>
      <p data-l="stadshagen"><strong>Stadshagen:</strong> open van 7:00 tot 18:30.</p>
      <p data-l="assendorp"><strong>Assendorp:</strong> open van 7:30 tot 18:30.</p>
      <p data-l="berkum"><strong>Berkum:</strong> open van 7:30 tot 18:00.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Hoeveel kinderen zitten er in een groep?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-1.webp" alt="Peuters spelen met houten blokken op het kleed, een medewerker zit bij ze op de grond" width="900" height="491" loading="lazy"></figure>
      <p>Op de babygroep negen kinderen met drie vaste medewerkers. Op de peutergroepen hoogstens veertien kinderen met drie medewerkers. Je kind heeft elke dag minstens één gezicht dat het kent.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Gaan de kinderen elke dag naar buiten?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-2.webp" alt="Peuters in regenlaarzen spelen in de zandbak in de herfst" width="900" height="491" loading="lazy"></figure>
      <p>Ja, ook als het regent. Geef regenlaarzen en een regenpak mee; die blijven op de groep. Alleen bij code oranje of hitte boven 30 graden blijven we binnen.</p></div></div>
    <div class="wgh__v" data-loc="1"><h3 class="wgh__q"><button type="button" aria-expanded="false">Waar kan ik parkeren bij het brengen?</button></h3><div class="wgh__a" hidden>
      <p data-l="stadshagen"><strong>Stadshagen:</strong> zes plekken voor de deur, een kwartier gratis. De bakfiets mag onder de overkapping.</p>
      <p data-l="assendorp"><strong>Assendorp:</strong> blauwe zone in de straat, met parkeerschijf twee uur gratis.</p>
      <p data-l="berkum"><strong>Berkum:</strong> een eigen erf met ruimte voor tien auto's.</p></div></div>
  </div>

  <div class="wgh__groep" data-cat="eten">
    <h2 class="wgh__h2">Eten en slapen</h2>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Wat eten de kinderen?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-3.webp" alt="Peuters lunchen aan een lage tafel met brood en komkommer" width="900" height="491" loading="lazy"></figure>
      <p>Om 9:30 fruit, om 11:30 brood met beleg en melk, om 15:00 een cracker en rond 16:30 groente of een warme snack. Ontbijten doet je kind thuis. Allergieën en dieetwensen bespreek je in het intakegesprek.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Houdt mijn kind zijn eigen slaapritme?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-4.webp" alt="Slaapkamer met witte bedjes en gedempt daglicht" width="900" height="491" loading="lazy"></figure>
      <p>Ja. Baby's slapen wanneer ze moe zijn, in een eigen bedje met hun eigen slaapzak. Peuters slapen na de lunch. Vertel ons hoe je kind thuis slaapt, dan doen we het zo veel mogelijk hetzelfde.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Moet ik flesvoeding of moedermelk meenemen?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-11.webp" alt="Een medewerker geeft een baby de fles in de schommelstoel" width="900" height="491" loading="lazy"></figure>
      <p>Moedermelk geef je gekoeld mee, met naam en datum op de fles. Kolven kan in de ouderkamer. Flesvoeding mag je meenemen in poedervorm; heb je geen voorkeur, dan geven wij een standaard volledige zuigelingenvoeding.</p></div></div>
  </div>

  <div class="wgh__groep" data-cat="ziek">
    <h2 class="wgh__h2">Ziek zijn</h2>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Wanneer moet mijn kind thuisblijven?</button></h3><div class="wgh__a" hidden>
      <figure class="wgh__fig"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-10.webp" alt="Een medewerker meet bij een peuter op de verschoontafel de temperatuur in het oor" width="900" height="491" loading="lazy"></figure>
      <p>Als je kind koorts heeft boven 38,5 graden, of te ziek is om mee te doen. Bij waterpokken of een verkoudheid mag je kind gewoon komen; we volgen de richtlijn van de GGD. Meld je kind af in de app voor 9:00.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Geven jullie medicijnen?</button></h3><div class="wgh__a" hidden>
      <p>Alleen medicijnen die een arts heeft voorgeschreven, en alleen als je een medicijnverklaring hebt ingevuld. Paracetamol geven we niet, omdat die koorts verbergt.</p></div></div>
    <div class="wgh__v"><h3 class="wgh__q"><button type="button" aria-expanded="false">Wat als mijn kind op de groep ziek wordt?</button></h3><div class="wgh__a" hidden>
      <p>Dan bellen we je meteen. We vragen je je kind binnen een uur op te halen. Kun je zelf niet, geef dan in de app een tweede contactpersoon op die wel kan.</p></div></div>
  </div>

  <div class="wgh__niks" id="wgh-niks">
    <img class="wgh__niks-foto" src="https://neddev.com/lab-media/page-faq-kinderopvang-14.webp" alt="Marieke van de planning aan haar bureau in Assendorp" width="530" height="491" loading="lazy">
    <div class="wgh__niks-txt">
      <h2 class="wgh__h2 wgh__niks-kop">Staat je vraag er niet bij?</h2>
      <p class="wgh__niks-uitleg">Stel hem aan Marieke van de planning. Je krijgt binnen één werkdag antwoord per mail, en vaak zetten we de vraag daarna ook op deze pagina. Liever bellen: <a href="tel:0381234567">038 123 4567</a>.</p>
      <form class="wgh__form" novalidate>
        <label class="wgh__veld">Je vraag<textarea name="vraag" rows="3" required></textarea></label>
        <div class="wgh__rij">
          <label class="wgh__veld">Je e-mailadres<input name="mail" type="email" autocomplete="email" required></label>
          <label class="wgh__veld">Locatie<select name="loc"><option value="">Weet ik nog niet</option><option>Stadshagen</option><option>Assendorp</option><option>Berkum</option></select></label>
        </div>
        <p class="wgh__fout" aria-live="polite"></p>
        <button type="submit" class="wgh__btn">Vraag versturen</button>
      </form>
    </div>
  </div>
</div></div>

<div class="wgh__huizen"><div class="wgh__in">
  <h2 class="wgh__h2">Drie huizen in Zwolle</h2>
  <div class="wgh__huizen-raster">
    <figure class="wgh__huis wgh__huis--groot"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-12.webp" alt="De oude boerderij in Berkum met grote tuin en speelhuisje" width="900" height="491" loading="lazy"><figcaption><strong>Berkum</strong>, Berkumerweg 88. Een oude boerderij met een boomgaard en vier groepen.</figcaption></figure>
    <figure class="wgh__huis"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-7.webp" alt="Het nieuwe lage bakstenen gebouw in Stadshagen met een bakfiets ervoor" width="900" height="491" loading="lazy"><figcaption><strong>Stadshagen</strong>, Frankhuizerallee 41. Nieuwbouw uit 2021, zes groepen.</figcaption></figure>
    <figure class="wgh__huis"><img src="https://neddev.com/lab-media/page-faq-kinderopvang-8.webp" alt="Het bakstenen schoolgebouw uit de jaren dertig in Assendorp" width="900" height="491" loading="lazy"><figcaption><strong>Assendorp</strong>, Van Karnebeekstraat 12. Een oude school met hoge ramen, vijf groepen.</figcaption></figure>
  </div>
</div></div>

<div class="wgh__voet" role="contentinfo"><div class="wgh__in wgh__voet-in">
  <p class="wgh__voet-logo">De Wilgenhoek</p>
  <p class="wgh__voet-txt">Kinderopvang De Wilgenhoek B.V. · Van Karnebeekstraat 12, 8011 JX Zwolle · KvK 05123456 · BTW NL001234567B01</p>
  <p class="wgh__voet-txt">Registratie in het Landelijk Register Kinderopvang: Stadshagen 123456789, Assendorp 234567891, Berkum 345678912. De inspectierapporten van de GGD IJsselland staan per locatie op <a href="#">de locatiepagina</a>.</p>
  <p class="wgh__voet-txt"><a href="#">Privacy</a> · <a href="#">Algemene voorwaarden</a> · <a href="#">Klachten en de oudercommissie</a></p>
</div></div>
</div>
</div>

/* Veelgestelde vragen · Kinderopvang De Wilgenhoek, Zwolle · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
/* fonts (Fontshare): sharpie@800 + switzer@400,500 */
.wgh{--bg:#F6D5CC;--opp:#FBE6E0;--tekst:#2A1210;--gedempt:#653D37;--lijn:#E8BDB2;--accent:#1E3A8A;--op-accent:#FFFFFF;--r:0px;--fs1:14px;--fs2:16px;--fs3:20px;--fs4:28px;--fs5:44px;--fs6:72px;--sectie:clamp(56px,7vw,104px);--kader:1660px;--lees:720px;--zij:20px;--kop:'Sharpie',sans-serif;
  container-type:inline-size;background:var(--bg);color:var(--tekst);font-family:'Switzer',sans-serif;font-weight:400;font-size:var(--fs2);line-height:1.6}
.wgh *{box-sizing:border-box}
.wgh [hidden]{display:none!important}
.wgh a{color:inherit}
.wgh img{display:block;max-width:100%;height:auto}
.wgh figure{margin:0}
.wgh__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wgh__in{max-width:var(--kader);margin:0 auto;padding:0 clamp(var(--zij),4vw,56px)}
.wgh__top{background:var(--tekst);color:var(--opp)}
.wgh__top-in{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.wgh__top-txt{margin:0;font-size:var(--fs1)}
.wgh__top-txt a{text-decoration:none;display:inline-block;padding:4px 0}
.wgh__head-in{display:flex;align-items:center;gap:32px;height:80px;border-bottom:2px solid var(--tekst)}
.wgh__logo{text-decoration:none;font-family:var(--kop);font-weight:800;font-size:var(--fs4);white-space:nowrap}
.wgh__nav{display:flex;gap:24px;margin-left:auto}
.wgh__nav a{text-decoration:none;transition:color .18s}
.wgh__nav a:hover{color:var(--accent)}
.wgh__nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.wgh__btn{display:inline-block;background:var(--accent);color:var(--op-accent)!important;text-decoration:none;font-family:inherit;font-weight:500;font-size:var(--fs2);padding:13px 22px;border-radius:var(--r);border:0;cursor:pointer;transition:background-color .18s}
.wgh__btn:hover{background:#152a66}
.wgh__menu-knop{display:none;margin-left:auto;width:44px;height:44px;border:2px solid var(--tekst);background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.wgh__menu-knop span{display:block;width:20px;height:2px;background:var(--tekst)}
.wgh__menu{display:flex;flex-direction:column;padding:8px var(--zij) 20px;border-bottom:2px solid var(--tekst)}
.wgh__menu a{padding:12px 0;text-decoration:none;font-size:var(--fs3);border-bottom:1px solid var(--lijn)}
.wgh__menu .wgh__btn{margin-top:16px;text-align:center}
.wgh__hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center;padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,72px)}
.wgh__h1{font-family:var(--kop);font-weight:800;font-size:var(--fs6);line-height:1;margin:0;max-width:10ch}
.wgh__lead{font-size:var(--fs3);line-height:1.5;margin:24px 0 32px;max-width:44ch}
.wgh__zoek{display:flex;align-items:center;gap:12px;background:var(--opp);border:2px solid var(--tekst);padding:0 16px;max-width:560px}
.wgh__zoek svg{flex:0 0 auto}
.wgh__zoek-in{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:var(--fs3);color:var(--tekst);padding:16px 0;outline:0}
.wgh__zoek:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.wgh__stand{margin:12px 0 0;color:var(--gedempt)}
.wgh__kaart{position:relative;background:var(--opp);border:2px solid var(--tekst)}
.wgh__kaart-svg{display:block;width:100%;height:auto}
.wgh__pin{position:absolute;transform:translate(-14px,-50%);display:flex;align-items:center;gap:8px;font:inherit;font-weight:500;font-size:var(--fs2);background:var(--bg);color:var(--tekst);border:2px solid var(--tekst);padding:6px 12px 6px 8px;cursor:pointer;transition:background-color .18s,color .18s}
.wgh__pin-stip{width:12px;height:12px;background:var(--accent);border-radius:50%}
.wgh__pin:hover{background:var(--opp)}
.wgh__pin[aria-pressed="true"]{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.wgh__pin[aria-pressed="true"] .wgh__pin-stip{background:var(--op-accent)}
.wgh__kaart-uitleg{margin:0;padding:12px 16px;border-top:2px solid var(--tekst);font-size:var(--fs1);color:var(--gedempt);background:var(--bg)}
.wgh__balk{border-top:2px solid var(--tekst);border-bottom:2px solid var(--tekst);background:var(--opp)}
.wgh__balk-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px;scroll-padding-inline:clamp(var(--zij),4vw,56px)}
.wgh__balk-in::-webkit-scrollbar{display:none}
.wgh__cat{flex:0 0 auto;font:inherit;font-size:var(--fs2);background:transparent;border:0;border-bottom:3px solid transparent;color:var(--tekst);padding:10px 14px;cursor:pointer;transition:border-color .18s,color .18s}
.wgh__cat:hover{color:var(--accent)}
.wgh__cat[aria-pressed="true"]{border-bottom-color:var(--accent);color:var(--accent);font-weight:500}
.wgh__vragen{padding:var(--sectie) 0}
.wgh__vragen-in{display:flex;flex-direction:column;gap:clamp(48px,5vw,72px)}
.wgh__locmelding{margin:0;padding:14px 18px;background:var(--accent);color:var(--op-accent);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.wgh__locweg{font:inherit;color:var(--op-accent);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:6px 0}
.wgh__groep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(20px,4vw,80px);row-gap:0;align-items:start}
.wgh__groep>.wgh__v{grid-column:2}
.wgh__h2{font-family:var(--kop);font-weight:800;font-size:var(--fs5);line-height:1.05;margin:0}
.wgh__groep>.wgh__h2{grid-row:span 20;position:sticky;top:24px}
.wgh__v{border-top:2px solid var(--tekst)}
.wgh__v:last-child{border-bottom:2px solid var(--tekst)}
.wgh__q{margin:0;font-size:var(--fs3);font-weight:500;line-height:1.35}
.wgh__q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;font:inherit;color:var(--tekst);background:none;border:0;padding:20px 0;cursor:pointer;transition:color .18s}
.wgh__q button:hover{color:var(--accent)}
.wgh__q button::after{content:'';flex:0 0 14px;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transition:transform .2s}
.wgh__q button[aria-expanded="true"]::after{transform:rotate(45deg)}
.wgh__q mark,.wgh__a mark{background:var(--accent);color:var(--op-accent);padding:0 2px}
.wgh__a{padding:0 0 24px;max-width:var(--lees)}
.wgh__a p{margin:0 0 12px}
.wgh__a p:last-child{margin-bottom:0}
.wgh__a strong{font-weight:500}
.wgh__a p.is-hier{background:var(--opp);padding:10px 14px;margin-left:-14px;border-left:3px solid var(--accent)}
.wgh__fig{float:right;width:min(300px,45%);margin:4px 0 12px 24px!important}
.wgh__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s ease}
.wgh__v.is-open .wgh__fig img{filter:none}
.wgh__a::after{content:'';display:block;clear:both}
.wgh__niks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,80px);background:var(--opp);border:2px solid var(--tekst);padding:clamp(20px,3vw,40px)}
.wgh__niks-foto{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:40% 50%;filter:grayscale(1)}
.wgh__niks-uitleg{margin:16px 0 24px;max-width:56ch}
.wgh__form{display:grid;gap:16px;max-width:var(--lees)}
.wgh__rij{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.wgh__veld{display:grid;gap:6px;font-weight:500}
.wgh__veld input,.wgh__veld textarea,.wgh__veld select{font:inherit;font-weight:400;color:var(--tekst);background:#fff;border:2px solid var(--tekst);border-radius:0;padding:12px;width:100%}
.wgh__veld textarea{resize:vertical}
.wgh__veld :focus{outline:3px solid var(--accent);outline-offset:1px}
.wgh__veld [aria-invalid="true"]{border-color:#B3261E}
.wgh__fout{margin:0;color:#9F1D17;font-weight:500}
.wgh__fout:empty{display:none}
.wgh__form .wgh__btn{justify-self:start}
.wgh__klaar{font-size:var(--fs3);margin:0}
.wgh.is-niks .wgh__niks{order:-1}
.wgh__huizen{padding:0 0 var(--sectie)}
.wgh__huizen .wgh__h2{margin-bottom:28px}
.wgh__huizen-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.wgh__huis--groot{grid-row:span 2}
.wgh__huis img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.wgh__huis--groot img{aspect-ratio:auto;height:calc(100% - 60px);min-height:320px}
.wgh__huis:hover img{filter:none}
.wgh__huis figcaption{margin-top:10px;color:var(--gedempt)}
.wgh__huis strong{color:var(--tekst);font-weight:500}
.wgh__voet{background:var(--tekst);color:#F2D9D2;font-size:var(--fs1)}
.wgh__voet-in{padding-top:40px;padding-bottom:40px;display:grid;gap:10px}
.wgh__voet-logo{font-family:var(--kop);font-weight:800;font-size:var(--fs4);color:var(--bg);margin:0 0 8px}
.wgh__voet-txt{margin:0;max-width:110ch}
@container (max-width:1000px){
  .wgh__nav,.wgh__btn--head{display:none}
  .wgh__menu-knop{display:flex}
  .wgh__hero-in,.wgh__groep,.wgh__niks{grid-template-columns:minmax(0,1fr)}
  .wgh__groep>.wgh__h2{grid-row:auto;position:static;margin-bottom:16px}
  .wgh__groep>.wgh__v{grid-column:1}
  .wgh__niks-foto{aspect-ratio:16/9}
}
@container (max-width:640px){
  .wgh>*{--fs3:18px;--fs4:24px;--fs5:32px;--fs6:48px}
  .wgh__top-in{flex-direction:column;gap:2px}
  .wgh__lead{font-size:var(--fs2)}
  .wgh__pin{font-size:var(--fs1);padding:5px 10px 5px 6px}
  .wgh__fig{float:none;width:100%;margin:0 0 12px!important}
  .wgh__rij,.wgh__huizen-raster{grid-template-columns:minmax(0,1fr)}
  .wgh__huis--groot{grid-row:auto}
  .wgh__huis--groot img{height:auto;aspect-ratio:16/9;min-height:0}
  .wgh__balk-in{margin:0}
}
@media (prefers-reduced-motion:reduce){.wgh *{transition:none!important}}

// Veelgestelde vragen · Kinderopvang De Wilgenhoek, Zwolle · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var s=root.querySelector('.wgh');if(!s)return;
var knop=s.querySelector('.wgh__menu-knop'),menu=s.querySelector('.wgh__menu');
knop.addEventListener('click',function(){var open=menu.hidden;menu.hidden=!open;knop.setAttribute('aria-expanded',String(open));knop.setAttribute('aria-label',open?'Menu sluiten':'Menu openen');});
menu.addEventListener('click',function(e){if(e.target.closest('a')){menu.hidden=true;knop.setAttribute('aria-expanded','false');}});
var vragen=[].slice.call(s.querySelectorAll('.wgh__v')),groepen=[].slice.call(s.querySelectorAll('.wgh__groep'));
var zoek=s.querySelector('.wgh__zoek-in'),stand=s.querySelector('.wgh__stand'),lm=s.querySelector('.wgh__locmelding');
var form=s.querySelector('.wgh__form'),kopNiks=s.querySelector('.wgh__niks-kop');
var cat='alle',loc='';var LN={stadshagen:'Stadshagen',assendorp:'Assendorp',berkum:'Berkum'};
vragen.forEach(function(v){var b=v.querySelector('.wgh__q button');v._q=b.textContent;v._a=v.querySelector('.wgh__a');
  b.addEventListener('click',function(){var open=b.getAttribute('aria-expanded')!=='true';b.setAttribute('aria-expanded',String(open));v._a.hidden=!open;v.classList.toggle('is-open',open);});});
function norm(t){return t.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');}
function esc(t){return t.replace(/&/g,'&amp;').replace(/</g,'&lt;');}
function markeer(t,q){if(!q)return esc(t);var i=norm(t).indexOf(q);if(i<0)return esc(t);return esc(t.slice(0,i))+'<mark>'+esc(t.slice(i,i+q.length))+'</mark>'+esc(t.slice(i+q.length));}
function tal(n){return ['Geen','Eén','Twee','Drie','Vier','Vijf','Zes','Zeven','Acht','Negen','Tien'][n]||String(n);}
function toon(){var q=norm(zoek.value.trim());var n=0;
  vragen.forEach(function(v){var g=v.closest('.wgh__groep').getAttribute('data-cat');
    var ok=(cat==='alle'||g===cat)&&(!loc||v.hasAttribute('data-loc'))&&(!q||norm(v._q+' '+v._a.textContent).indexOf(q)>-1);
    v.hidden=!ok;if(ok)n++;v.querySelector('.wgh__q button').innerHTML=markeer(v._q,q);
    v._a.querySelectorAll('p[data-l]').forEach(function(p){p.hidden=!!loc&&p.getAttribute('data-l')!==loc;p.classList.toggle('is-hier',!!loc&&p.getAttribute('data-l')===loc);});
    if(q&&ok&&norm(v._a.textContent).indexOf(q)>-1&&norm(v._q).indexOf(q)<0){v.classList.add('is-open');v._a.hidden=false;v.querySelector('.wgh__q button').setAttribute('aria-expanded','true');}});
  groepen.forEach(function(g){g.hidden=!g.querySelector('.wgh__v:not([hidden])');});
  if(!q&&cat==='alle'&&!loc){stand.textContent='19 vragen in 6 onderwerpen';}
  else if(n===0){stand.textContent='Niets gevonden'+(q?' voor ‘'+zoek.value.trim()+'’':'')+'. Stel je vraag hieronder.';}
  else{stand.textContent=tal(n)+(n===1?' vraag':' vragen')+(q?' met ‘'+zoek.value.trim()+'’':'')+(loc?' voor '+LN[loc]:'');}
  s.classList.toggle('is-niks',n===0);
  kopNiks.textContent=n===0?'Daar hebben we nog geen antwoord op':'Staat je vraag er niet bij?';
  if(n===0&&q&&!form.elements.vraag.dataset.zelf){form.elements.vraag.value=zoek.value.trim();}
  lm.hidden=!loc;if(loc)lm.querySelector('span').textContent='Je ziet de antwoorden voor '+LN[loc]+'.';}
zoek.addEventListener('input',toon);
form.elements.vraag.addEventListener('input',function(){form.elements.vraag.dataset.zelf='1';});
s.querySelectorAll('.wgh__cat').forEach(function(b){b.addEventListener('click',function(){cat=b.getAttribute('data-cat');s.querySelectorAll('.wgh__cat').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});toon();});});
function zetLoc(l){loc=l;s.querySelectorAll('.wgh__pin').forEach(function(p){p.setAttribute('aria-pressed',String(p.getAttribute('data-loc')===loc));});if(loc){form.elements.loc.value=LN[loc];}toon();}
s.querySelectorAll('.wgh__pin').forEach(function(p){p.addEventListener('click',function(){var l=p.getAttribute('data-loc');zetLoc(loc===l?'':l);});});
s.querySelector('.wgh__locweg').addEventListener('click',function(){zetLoc('');});
form.addEventListener('submit',function(e){e.preventDefault();var v=form.elements.vraag,m=form.elements.mail,fout=form.querySelector('.wgh__fout');var msg='';
  v.removeAttribute('aria-invalid');m.removeAttribute('aria-invalid');
  if(v.value.trim().length<8){msg='Schrijf je vraag in een paar woorden.';v.setAttribute('aria-invalid','true');v.focus();}
  else if(!/^[^@\s]+@[^@\s]+\.[a-z]{2,}$/i.test(m.value.trim())){msg='Dit e-mailadres klopt nog niet.';m.setAttribute('aria-invalid','true');m.focus();}
  if(msg){fout.textContent=msg;return;}
  var p=document.createElement('p');p.className='wgh__klaar';p.setAttribute('tabindex','-1');p.textContent='Dank je. Marieke mailt je uiterlijk morgen voor 17:00 een antwoord op '+m.value.trim()+'.';form.replaceWith(p);p.focus();});
}
init(document.querySelector('.jouw-container'));

More page examples

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 →