<!-- Lees meer / lees minder · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lmd">
<article class="lmd__art">
<span class="lmd__eyebrow">Dakdekker Amersfoort · 3 min lezen</span>
<h3 class="lmd__h">Daklekkage in Amersfoort? Zo pakken we het aan</h3>
<p class="lmd__intro">Een lekkend dak merk je vaak pas als er een vochtplek op het plafond verschijnt. Dan is het water meestal al weken onderweg. We komen binnen 48 uur langs in Amersfoort, Leusden en Soest, zoeken de oorzaak met een vochtmeter en geven je nog op het dak een vaste prijs voor de reparatie.</p>
<details class="lmd__d">
<summary class="lmd__s"><span class="lmd__t-more">Lees meer</span><span class="lmd__t-less">Lees minder</span><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
<div class="lmd__more">
<p>Bij platte daken zit het lek vaak bij een naad in de bitumen of bij de dakrand. Bij pannendaken gaat het meestal om een verschoven pan, een gescheurde vorst of loodslabben rond de schoorsteen.</p>
<h4>Wat kost een reparatie?</h4>
<ul><li>Pannen vervangen of terugleggen: vanaf € 145</li><li>Loodwerk rond de schoorsteen: vanaf € 385</li><li>Naad in bitumen herstellen: vanaf € 210</li></ul>
<p>Alle prijzen zijn inclusief btw en voorrijkosten binnen 25 km. Op het werk krijg je 5 jaar garantie, schriftelijk.</p>
<button class="lmd__less" type="button">Lees minder<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 15 6-6 6 6"/></svg></button>
</div>
</details>
</article>
</div>
</div>
/* Lees meer / lees minder · NedDev · eigen werk. */
.lmd{--ink:#0a0a0a;--pop:#F5480F;--pd:#b83a0b;position:absolute;inset:0;overflow:auto;background:#fff;padding:18px 22px;font-family:'Switzer',system-ui,sans-serif;color:var(--ink);interpolate-size:allow-keywords}
.lmd__art{max-width:58ch}
.lmd__eyebrow{display:block;font:600 9.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pd);margin-bottom:8px}
.lmd__h{margin:0 0 8px;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.lmd__intro{position:relative;margin:0;font-size:13.5px;line-height:1.6;color:#2b2b2b}
.lmd__intro::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3.2em;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .35s ease}
.lmd__art.is-open .lmd__intro::after,.lmd__art:has(.lmd__d[open]) .lmd__intro::after{opacity:0}
.lmd__s,.lmd__less{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 0;font:600 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;list-style:none;border-bottom:2px solid var(--pop);transition:color .15s,gap .15s}
.lmd__s::-webkit-details-marker{display:none}
.lmd__s::marker{content:''}
.lmd__less{display:none;margin-top:12px;border:0;border-bottom:2px solid var(--pop);background:none;color:var(--ink);border-radius:0}
.lmd--js .lmd__less{display:inline-flex}
.lmd--js .lmd__d[open]>.lmd__s{display:none}
.lmd__s:hover,.lmd__less:hover{color:var(--pd);gap:9px}
.lmd__s:focus-visible,.lmd__less:focus-visible{outline:2px solid var(--pd);outline-offset:3px;border-radius:2px}
.lmd__s svg,.lmd__less svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease}
.lmd__t-less{display:none}
.lmd__d[open] .lmd__t-less{display:inline}.lmd__d[open] .lmd__t-more{display:none}
.lmd__d[open] .lmd__s svg{transform:rotate(180deg)}
.lmd__more{outline:none;font-size:13.5px;line-height:1.6;color:#2b2b2b}
.lmd__more p{margin:10px 0 0}
.lmd__more h4{margin:14px 0 4px;font-size:14px;color:var(--ink)}
.lmd__more ul{margin:0;padding-left:18px}
.lmd__more li{margin:2px 0;font-variant-numeric:tabular-nums}
@supports (interpolate-size:allow-keywords) and selector(::details-content){
.lmd__d::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
.lmd__d[open]::details-content{block-size:auto}
}
@media (max-width:420px){.lmd__art:not(.is-open) .lmd__intro{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.lmd{padding:14px 16px}.lmd__h{font-size:16px}.lmd__intro,.lmd__more{font-size:13px}}
@media (prefers-reduced-motion:reduce){.lmd__d::details-content,.lmd__intro::after,.lmd__s svg{transition:none}}
// Lees meer / lees minder · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.lmd');if(!w)return;
var art=w.querySelector('.lmd__art'),d=w.querySelector('.lmd__d'),s=w.querySelector('.lmd__s'),more=w.querySelector('.lmd__more');
var native=!!(window.CSS&&CSS.supports('interpolate-size: allow-keywords')&&CSS.supports('selector(::details-content)'));
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,busy=false;
d.addEventListener('toggle',function(){art.classList.toggle('is-open',d.open);
if(!d.open){var top=art.querySelector('.lmd__h').offsetTop-12;if(w.scrollTop>top)w.scrollTo({top:Math.max(0,top),behavior:reduce?'auto':'smooth'});}});
w.classList.add('lmd--js');
function collapse(){if(busy)return;if(native||reduce||!more.animate){d.open=false;s.focus();return;}busy=true;var h2=more.offsetHeight;var b=more.animate([{height:h2+'px',overflow:'hidden'},{height:'0px',overflow:'hidden'}],{duration:340,easing:'ease'});b.onfinish=function(){d.open=false;busy=false;s.focus();};}
w.querySelector('.lmd__less').addEventListener('click',collapse);
if(!native&&!reduce&&more.animate){s.addEventListener('click',function(e){if(d.open)return;e.preventDefault();if(busy)return;busy=true;d.open=true;var h=more.scrollHeight;var a=more.animate([{height:'0px',overflow:'hidden'},{height:h+'px',overflow:'hidden'}],{duration:420,easing:'cubic-bezier(.2,.7,.2,1)'});a.onfinish=function(){busy=false;};});}
d.addEventListener('toggle',function(){if(d.open&&(document.activeElement===s||document.activeElement===document.body)){more.tabIndex=-1;setTimeout(function(){more.focus({preventScroll:true});},90);}});
}
init(document.querySelector('.jouw-container'));