FAQ met zoeken en zachte hoogte Nieuw

Veelgestelde vragen op

(er staat er één tegelijk open) met een zachte hoogte-animatie via ::details-content + interpolate-size, plus een zoekveld dat filtert en de treffers markeert. Fallback: browsers zonder ::details-content openen direct zonder animatie, een klein script sluit de andere vragen als name niet wordt ondersteund.

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.

Zo 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 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'));

Meer uit componenten

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 →