FAQ met zoeken en zachte hoogte New

FAQ built on

(one open at a time) with a soft height animation via ::details-content + interpolate-size, plus a search field that filters and highlights matches. Fallback: browsers without ::details-content open instantly, a small script closes siblings where name is unsupported.

Zoek in de vragen

Wat kost een hybride warmtepomp inclusief installatie?

Reken op € 4.500 tot € 7.000, afhankelijk van vermogen en leidingwerk. Na een gratis opname bij je thuis krijg je een vaste prijs.

Krijg ik subsidie via de ISDE?

Meestal wel. Wij controleren vooraf of jouw model op de lijst staat en vragen de subsidie na oplevering voor je aan.

Hoe lang duurt de installatie?

Eén werkdag. De cv-ketel blijft hangen, dus je zit geen avond zonder warm water.

Maakt de buitenunit veel geluid?

Op vijf meter afstand hoor je ongeveer 35 dB, zo zacht als een koelkast. We plaatsen de unit zo dat de buren er geen last van hebben.

Kan ik in termijnen betalen?

Ja. Je betaalt 30% bij opdracht via iDEAL en de rest na oplevering. Lenen via het Warmtefonds kan ook.

Wat valt onder de garantie?

Vijf jaar op het toestel en twee jaar op de installatie. Bij een storing staan we binnen 48 uur bij je op de stoep.

How to use it

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

<!-- FAQ met zoeken en zachte hoogte · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fqz">
<label class="fqz__search"><span class="fqz__label">Zoek in de vragen</span><span class="fqz__field"><svg class="fqz__mag" viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="M13 13l4 4"/></svg><input class="fqz__input" type="search" placeholder="Bijv. subsidie, geluid, garantie" autocomplete="off"></span></label>
<p class="fqz__count" aria-live="polite"></p>
<div class="fqz__list">
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Wat kost een hybride warmtepomp inclusief installatie?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Reken op € 4.500 tot € 7.000, afhankelijk van vermogen en leidingwerk. Na een gratis opname bij je thuis krijg je een vaste prijs.</p></div></details>
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Krijg ik subsidie via de ISDE?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Meestal wel. Wij controleren vooraf of jouw model op de lijst staat en vragen de subsidie na oplevering voor je aan.</p></div></details>
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Hoe lang duurt de installatie?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Eén werkdag. De cv-ketel blijft hangen, dus je zit geen avond zonder warm water.</p></div></details>
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Maakt de buitenunit veel geluid?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Op vijf meter afstand hoor je ongeveer 35 dB, zo zacht als een koelkast. We plaatsen de unit zo dat de buren er geen last van hebben.</p></div></details>
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Kan ik in termijnen betalen?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Ja. Je betaalt 30% bij opdracht via iDEAL en de rest na oplevering. Lenen via het Warmtefonds kan ook.</p></div></details>
<details class="fqz__item" name="fqz-vragen"><summary class="fqz__q"><span class="fqz__qt">Wat valt onder de garantie?</span><span class="fqz__icon" aria-hidden="true"></span></summary><div class="fqz__a"><p>Vijf jaar op het toestel en twee jaar op de installatie. Bij een storing staan we binnen 48 uur bij je op de stoep.</p></div></details>
</div>
<div class="fqz__empty" hidden><p class="fqz__etitle">Geen vraag gevonden voor "<span class="fqz__term"></span>"</p><p class="fqz__etext">Bel ons gerust op 010 123 4567, of probeer een ander woord.</p><button type="button" class="fqz__clear">Wis zoekterm</button></div>
</div>
</div>

/* FAQ met zoeken en zachte hoogte · NedDev · eigen werk. */
.fqz{position:absolute;inset:0;overflow:auto;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;padding:14px 16px 16px;box-sizing:border-box;interpolate-size:allow-keywords;scrollbar-width:thin;text-align:left}
.fqz *,.fqz *::before,.fqz *::after{box-sizing:border-box}
.fqz__search{display:block}
.fqz__label{display:block;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5c5a57;margin-bottom:6px}
.fqz__field{position:relative;display:block}
.fqz__mag{position:absolute;left:11px;top:50%;width:15px;height:15px;transform:translateY(-50%);fill:none;stroke:#5c5a57;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.fqz__input{display:block;width:100%;height:36px;margin:0;padding:0 12px 0 34px;border:1px solid #cfccc7;border-radius:4px;font:inherit;font-size:14px;color:#0a0a0a;background:#fff;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.fqz__input::placeholder{color:#8a8781}
.fqz__input:hover{border-color:#8a8781}
.fqz__input:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.fqz__count{margin:6px 0 2px;min-height:14px;font:11px/1.3 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57}
.fqz__item{border-bottom:1px solid #e6e3df}
.fqz__item[hidden]{display:none}
.fqz__q{list-style:none;display:flex;align-items:center;gap:12px;padding:10px 2px;cursor:pointer;font-size:14px;font-weight:600;line-height:1.3;border-radius:3px;transition:color .15s}
.fqz__q::-webkit-details-marker{display:none}
.fqz__q::marker{content:''}
.fqz__q:hover{color:#B8360A}
.fqz__q:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.fqz__qt{flex:1}
.fqz__icon{position:relative;width:12px;height:12px;flex:none}
.fqz__icon::before,.fqz__icon::after{content:'';position:absolute;left:0;top:5px;width:12px;height:2px;background:currentColor;transition:transform .2s ease}
.fqz__icon::after{transform:rotate(90deg)}
.fqz__item[open] .fqz__icon::after{transform:rotate(0deg)}
.fqz__a{padding:0 2px 12px;font-size:13px;line-height:1.5;color:#3d3b38}
.fqz__a p{margin:0}
.fqz mark{background:#ffdccb;color:inherit;border-radius:2px;padding:0 1px}
.fqz__empty{padding:18px 4px 6px}
.fqz__etitle{margin:0 0 4px;font-size:14px;font-weight:600}
.fqz__etext{margin:0 0 12px;font-size:13px;line-height:1.45;color:#5c5a57}
.fqz__clear{font:600 13px/1 'Switzer',system-ui,sans-serif;padding:9px 14px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;cursor:pointer;transition:background .15s,color .15s}
.fqz__clear:hover{background:#0a0a0a;color:#fff}
.fqz__clear:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.fqz__clear:active{transform:translateY(1px)}
@supports selector(::details-content){
.fqz__item::details-content{block-size:0;overflow-y:clip;transition:block-size .28s cubic-bezier(.2,.7,.2,1),content-visibility .28s allow-discrete}
.fqz__item[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.fqz__icon::before,.fqz__icon::after,.fqz__q{transition:none}}
@supports selector(::details-content){@media (prefers-reduced-motion:reduce){.fqz__item::details-content{transition:none}}}

// FAQ met zoeken en zachte hoogte · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.fqz');if(!w)return;
var input=w.querySelector('.fqz__input'),count=w.querySelector('.fqz__count'),empty=w.querySelector('.fqz__empty'),term=w.querySelector('.fqz__term');
var items=[].slice.call(w.querySelectorAll('.fqz__item'));
var grp='fqz-'+Math.random().toString(36).slice(2,8);
items.forEach(function(d){d.setAttribute('name',grp);d._qt=d.querySelector('.fqz__qt');d._ap=d.querySelector('.fqz__a p');d._q=d._qt.textContent;d._a=d._ap.textContent;
 d.addEventListener('toggle',function(){if(d.open){items.forEach(function(o){if(o!==d&&o.open)o.open=false;});}});});
function norm(s){return s.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'');}
function esc(s){return s.replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];});}
function mark(text,q){if(!q)return esc(text);var n=norm(text),out='',i=0,idx;while(q&&(idx=n.indexOf(q,i))>-1){out+=esc(text.slice(i,idx))+'<mark>'+esc(text.slice(idx,idx+q.length))+'</mark>';i=idx+q.length;}return out+esc(text.slice(i));}
function run(){var raw=input.value.trim(),q=norm(raw),hits=[];
 items.forEach(function(d){var ok=!q||norm(d._q).indexOf(q)>-1||norm(d._a).indexOf(q)>-1;d.hidden=!ok;d._qt.innerHTML=mark(d._q,q);d._ap.innerHTML=mark(d._a,q);if(ok)hits.push(d);});
 empty.hidden=!(q&&hits.length===0);term.textContent=raw;
 count.textContent=q?(hits.length===1?'1 vraag gevonden':hits.length+' vragen gevonden'):'';
 if(q.length>=3&&hits.length&&!hits.some(function(d){return d.open;}))hits[0].open=true;}
var t;input.addEventListener('input',function(){clearTimeout(t);t=setTimeout(run,120);});
input.addEventListener('keydown',function(e){if(e.key==='Escape'&&input.value){e.preventDefault();input.value='';run();}});
w.querySelector('.fqz__clear').addEventListener('click',function(){input.value='';run();input.focus();});
}
init(document.querySelector('.jouw-container'));

More components

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 →