FAQ in twee kolommen per categorie Nieuw
FAQ als kaarten per categorie in twee kolommen, met filterchips (aria-pressed) en één open vraag tegelijk via details name. Zachte hoogte met ::details-content en interpolate-size: allow-keywords achter @supports; zonder die ondersteuning klappen de antwoorden direct open. Eindigt met een contactkaart voor vragen die er niet bij staan.
Kindcentrum De Speelwei · Amersfoort-Vathorst
Vragen van ouders
11 vragen in 4 onderwerpen
Inschrijven
Vanaf wanneer kan ik mijn kind inschrijven?
Zodra u zwanger bent. Wij raden aan om rond de 16e week in te schrijven: voor de babygroep is de wachttijd nu ongeveer 5 maanden.
Kost inschrijven geld?
Nee. Inschrijven is gratis en u zit nergens aan vast tot u het contract tekent.
Kan ik dagen ruilen?
Ja, binnen dezelfde maand en als er plek is op de groep. Ruilen regelt u zelf in de ouderapp.
Kosten en toeslag
Wat kost een dag opvang?
Het uurtarief voor dagopvang is in 2026 € 10,75. Een dag van 7.30 tot 18.30 uur (11 uur) kost dus € 118,25, vóór kinderopvangtoeslag.
Krijg ik kinderopvangtoeslag?
Als u allebei werkt of studeert, meestal wel. U vraagt de toeslag zelf aan bij de Belastingdienst; wij sturen u elk jaar de jaaropgave.
Betaal ik ook in de schoolvakanties?
Bij een 52-wekencontract wel. Kiest u 48 weken, dan betaalt u vier vakantieweken niet en is uw maandbedrag lager.
Dagritme
Hoe ziet een dag eruit?
Brengen tot 9.00 uur, fruit en buitenspelen, warme lunch om 11.30 uur, rust, activiteit in de middag en ophalen tussen 16.30 en 18.30 uur.
Wat eet mijn kind?
Onze kok maakt elke dag een warme lunch, op maandag vegetarisch. Dieetwensen en allergieën bespreken we bij de intake.
Slapen kinderen ook buiten?
In de babygroep kan dat in buitenbedjes onder de overkapping, als u dat wilt en het warmer is dan 0 graden.
Wennen
Hoe gaat het wennen?
Twee ochtenden in de week vóór de start. De eerste keer blijft u een uur, de tweede keer brengt u uw kind en gaat u weg.
Wat neem ik mee op de eerste dag?
Reservekleding, een knuffel of speen en eventueel afgekolfde melk met naam en datum. Luiers en flesvoeding hebben wij.
Staat uw vraag er niet bij?
Bel Ilse of Mirjam van de planning, op werkdagen van 8.30 tot 16.30 uur.
033 123 45 67Plan een rondleidingZo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- FAQ in twee kolommen per categorie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ftk">
<div class="ftk__in">
<div class="ftk__head">
<div><p class="ftk__eyebrow">Kindcentrum De Speelwei · Amersfoort-Vathorst</p><h2 class="ftk__h">Vragen van ouders</h2></div>
<div class="ftk__chips" role="group" aria-label="Filter op onderwerp">
<button type="button" class="ftk__chip" data-c="" aria-pressed="true">Alles</button>
<button type="button" class="ftk__chip" data-c="in" aria-pressed="false">Inschrijven</button>
<button type="button" class="ftk__chip" data-c="kost" aria-pressed="false">Kosten en toeslag</button>
<button type="button" class="ftk__chip" data-c="dag" aria-pressed="false">Dagritme</button>
<button type="button" class="ftk__chip" data-c="wen" aria-pressed="false">Wennen</button>
</div>
</div>
<p class="ftk__cnt" aria-live="polite">11 vragen in 4 onderwerpen</p>
<div class="ftk__cols">
<div class="ftk__grp" data-c="in"><p class="ftk__lab"><i style="--c:#3f7d4e"></i>Inschrijven</p>
<details class="ftk__q" name="ftk"><summary>Vanaf wanneer kan ik mijn kind inschrijven?</summary><div class="ftk__a"><p>Zodra u zwanger bent. Wij raden aan om rond de 16e week in te schrijven: voor de babygroep is de wachttijd nu ongeveer 5 maanden.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Kost inschrijven geld?</summary><div class="ftk__a"><p>Nee. Inschrijven is gratis en u zit nergens aan vast tot u het contract tekent.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Kan ik dagen ruilen?</summary><div class="ftk__a"><p>Ja, binnen dezelfde maand en als er plek is op de groep. Ruilen regelt u zelf in de ouderapp.</p></div></details>
</div>
<div class="ftk__grp" data-c="kost"><p class="ftk__lab"><i style="--c:#c4553a"></i>Kosten en toeslag</p>
<details class="ftk__q" name="ftk"><summary>Wat kost een dag opvang?</summary><div class="ftk__a"><p>Het uurtarief voor dagopvang is in 2026 € 10,75. Een dag van 7.30 tot 18.30 uur (11 uur) kost dus € 118,25, vóór kinderopvangtoeslag.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Krijg ik kinderopvangtoeslag?</summary><div class="ftk__a"><p>Als u allebei werkt of studeert, meestal wel. U vraagt de toeslag zelf aan bij de Belastingdienst; wij sturen u elk jaar de jaaropgave.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Betaal ik ook in de schoolvakanties?</summary><div class="ftk__a"><p>Bij een 52-wekencontract wel. Kiest u 48 weken, dan betaalt u vier vakantieweken niet en is uw maandbedrag lager.</p></div></details>
</div>
<div class="ftk__grp" data-c="dag"><p class="ftk__lab"><i style="--c:#2f6f9a"></i>Dagritme</p>
<details class="ftk__q" name="ftk"><summary>Hoe ziet een dag eruit?</summary><div class="ftk__a"><p>Brengen tot 9.00 uur, fruit en buitenspelen, warme lunch om 11.30 uur, rust, activiteit in de middag en ophalen tussen 16.30 en 18.30 uur.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Wat eet mijn kind?</summary><div class="ftk__a"><p>Onze kok maakt elke dag een warme lunch, op maandag vegetarisch. Dieetwensen en allergieën bespreken we bij de intake.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Slapen kinderen ook buiten?</summary><div class="ftk__a"><p>In de babygroep kan dat in buitenbedjes onder de overkapping, als u dat wilt en het warmer is dan 0 graden.</p></div></details>
</div>
<div class="ftk__grp" data-c="wen"><p class="ftk__lab"><i style="--c:#b58a1b"></i>Wennen</p>
<details class="ftk__q" name="ftk"><summary>Hoe gaat het wennen?</summary><div class="ftk__a"><p>Twee ochtenden in de week vóór de start. De eerste keer blijft u een uur, de tweede keer brengt u uw kind en gaat u weg.</p></div></details>
<details class="ftk__q" name="ftk"><summary>Wat neem ik mee op de eerste dag?</summary><div class="ftk__a"><p>Reservekleding, een knuffel of speen en eventueel afgekolfde melk met naam en datum. Luiers en flesvoeding hebben wij.</p></div></details>
</div>
<div class="ftk__contact"><p class="ftk__ct">Staat uw vraag er niet bij?</p><p>Bel Ilse of Mirjam van de planning, op werkdagen van 8.30 tot 16.30 uur.</p><a class="ftk__tel" href="tel:0331234567">033 123 45 67</a><a class="ftk__tour" href="#">Plan een rondleiding</a></div>
</div>
</div>
</div>
</div>/* FAQ in twee kolommen per categorie · NedDev · eigen werk. */
/* fonts (Fontshare): outfit@400,500,600 */
.ftk{--ink:#2a2522;--mut:#6a615a;--bg:#fff8ee;--card:#fff;--line:#eadfce;--acc:#c4553a;background:var(--bg);color:var(--ink);font-family:'Outfit','Switzer',sans-serif;box-sizing:border-box}
.ftk *,.ftk *::before{box-sizing:border-box}
.ftk [hidden]{display:none!important}
.ftk__in{max-width:1140px;margin:0 auto;padding:46px 32px 40px}
.ftk__head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 30px;flex-wrap:wrap;margin-bottom:10px}
.ftk__eyebrow{margin:0 0 8px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.ftk__h{margin:0;font-weight:600;font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-.02em}
.ftk__chips{display:flex;flex-wrap:wrap;gap:6px}
.ftk__chip{font:500 14px 'Outfit',sans-serif;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.ftk__chip:hover{border-color:var(--ink)}
.ftk__chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ftk__chip:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.ftk__cnt{margin:0 0 16px;font-size:13px;color:var(--mut)}
.ftk__cols{columns:2;column-gap:16px}
.ftk__grp,.ftk__contact{break-inside:avoid;margin:0 0 16px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 20px 6px}
.ftk__lab{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.ftk__lab i{width:9px;height:9px;border-radius:2px;background:var(--c)}
.ftk__q{border-top:1px solid var(--line)}
.ftk__q:first-of-type{border-top:0}
.ftk__q summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;font-weight:500;font-size:16px;line-height:1.35;cursor:pointer;border-radius:4px;transition:color .15s ease}
.ftk__q summary::-webkit-details-marker{display:none}
.ftk__q summary::after{content:'';flex:none;width:22px;height:22px;border-radius:50%;background-color:#f6efe3;background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-size:10px 1.6px,1.6px 10px;background-position:center;background-repeat:no-repeat;transition:transform .2s ease,background-color .15s ease}
.ftk__q[open] summary::after{transform:rotate(45deg);background-color:#f0e2cc}
.ftk__q summary:hover{color:var(--acc)}
.ftk__q summary:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.ftk__a p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--mut);max-width:58ch}
@supports (interpolate-size:allow-keywords){
.ftk__cols{interpolate-size:allow-keywords}
.ftk__q::details-content{block-size:0;overflow:hidden;transition:block-size .28s ease,content-visibility .28s allow-discrete}
.ftk__q[open]::details-content{block-size:auto}
}
.ftk__contact{background:var(--ink);color:#fff;border-color:var(--ink);padding:20px}
.ftk__ct{margin:0 0 6px;font-weight:600;font-size:19px}
.ftk__contact p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:#e8ded2}
.ftk__contact .ftk__ct{color:#fff}
.ftk__tel{display:block;font-weight:600;font-size:24px;color:#fff;text-decoration:none;font-variant-numeric:tabular-nums;margin-bottom:12px}
.ftk__tel:hover{text-decoration:underline;text-underline-offset:4px}
.ftk__tour{display:inline-flex;padding:11px 16px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;transition:background-color .15s ease}
.ftk__tour:hover{background:#f6efe3}
.ftk__tel:focus-visible,.ftk__tour:focus-visible{outline:3px solid #f0b49f;outline-offset:3px}
@media (max-width:760px){
.ftk__in{padding:32px 14px 26px}
.ftk__cols{columns:1}
.ftk__grp,.ftk__contact{padding:6px 14px 4px}
.ftk__contact{padding:16px 14px}
.ftk__q summary{font-size:15px}
.ftk__chip{padding:7px 11px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.ftk *,.ftk__q::details-content{transition:none!important}}// FAQ in twee kolommen per categorie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.ftk'); if(!w) return;
const chips=[...w.querySelectorAll('.ftk__chip')], grps=[...w.querySelectorAll('.ftk__grp')], cnt=w.querySelector('.ftk__cnt');
chips.forEach(c=>c.addEventListener('click',()=>{const v=c.dataset.c; chips.forEach(x=>x.setAttribute('aria-pressed',x===c?'true':'false'));
let n=0; grps.forEach(g=>{const on=!v||g.dataset.c===v; g.hidden=!on; if(on) n+=g.querySelectorAll('.ftk__q').length; else g.querySelectorAll('details[open]').forEach(d=>d.open=false);});
cnt.textContent=n+(n===1?' vraag':' vragen')+(v?' over '+c.textContent.toLowerCase():' in 4 onderwerpen');}));
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
}
init(document.querySelector('.jouw-container'));
Meer uit paginasecties
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →