Beeld-accordeon Nieuw

<!-- Beeld-accordeon · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="iac"><div class="iac__hd"><span>Vakantiepark De Zeereep · Callantsoog</span><span>5 verblijven</span></div><div class="iac__row">
<button class="iac__p iac__p--0 is-on" type="button" aria-expanded="true"><span class="iac__v">Duinhuisje</span><span class="iac__cap"><b>Duinhuisje</b><small>4 pers. · vanaf € 129 / nacht</small></span></button>
<button class="iac__p iac__p--1" type="button" aria-expanded="false"><span class="iac__v">Boslodge</span><span class="iac__cap"><b>Boslodge</b><small>6 pers. · vanaf € 164 / nacht</small></span></button>
<button class="iac__p iac__p--2" type="button" aria-expanded="false"><span class="iac__v">Strandstudio</span><span class="iac__cap"><b>Strandstudio</b><small>2 pers. · vanaf € 98 / nacht</small></span></button>
<button class="iac__p iac__p--3" type="button" aria-expanded="false"><span class="iac__v">Polderhuis</span><span class="iac__cap"><b>Polderhuis</b><small>8 pers. · vanaf € 219 / nacht</small></span></button>
<button class="iac__p iac__p--4" type="button" aria-expanded="false"><span class="iac__v">Dijkwoning</span><span class="iac__cap"><b>Dijkwoning</b><small>4 pers. · vanaf € 142 / nacht</small></span></button></div></div>
</div>

/* Beeld-accordeon · NedDev · eigen werk. */
.iac{position:absolute;inset:0;background:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;padding:10px;gap:8px;container-type:inline-size}
.iac__hd{display:flex;justify-content:space-between;gap:8px;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#a8a39c;white-space:nowrap;overflow:hidden}
.iac__row{flex:1;display:flex;gap:4px;min-height:0}
.iac__p{appearance:none;border:0;padding:0;position:relative;flex:1;min-width:0;border-radius:4px;overflow:hidden;cursor:pointer;transition:flex-grow .65s cubic-bezier(.6,0,.2,1);text-align:left;color:#fff}
.iac__p.is-on{flex-grow:5.5;cursor:default}
.iac__p::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,10,.72));pointer-events:none}
.iac__p:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.iac__v{position:absolute;left:50%;bottom:10px;z-index:1;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font:600 10.5px 'Switzer',sans-serif;letter-spacing:.02em;white-space:nowrap;transition:opacity .3s .2s}
.iac__p.is-on .iac__v{opacity:0;transition-delay:0s}
.iac__cap{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;display:flex;flex-direction:column;gap:2px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;white-space:nowrap}
.iac__p.is-on .iac__cap{opacity:1;transform:none;transition:opacity .45s .35s,transform .45s .35s}
.iac__cap b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.iac__cap small{font:500 10px 'JetBrains Mono',monospace;color:#f2c9b6}
.iac__p--0{background:radial-gradient(140% 55% at 20% 100%,#c9a273 0 55%,transparent 56%),radial-gradient(120% 50% at 92% 100%,#b38a5c 0 52%,transparent 53%),radial-gradient(circle at 70% 36%,#F5480F 0 9%,transparent 9.5%),linear-gradient(#f6c7a6,#f4e6da)}
.iac__p--1{background:radial-gradient(60% 34% at 28% 28%,#2f3d33 0 60%,transparent 61%),radial-gradient(60% 34% at 80% 42%,#26332a 0 60%,transparent 61%),repeating-linear-gradient(90deg,#141a16 0 5px,transparent 5px 26px),linear-gradient(#8e9c8a,#3e4a40)}
.iac__p--2{background:radial-gradient(42% 14% at 62% 64%,#F5480F 0 50%,transparent 51%),linear-gradient(90deg,transparent 61.5%,#0a0a0a 61.5% 62.5%,transparent 62.5%) 0 0/100% 82% no-repeat,linear-gradient(180deg,#dfe7ea 0 46%,#5b7684 46% 58%,#e8d8bf 58%)}
.iac__p--3{background:linear-gradient(#0a0a0a,#0a0a0a) 40% 59%/26% 13% no-repeat,linear-gradient(180deg,transparent 78%,#b6c4cc 78% 80%,transparent 80%),linear-gradient(180deg,#e9eef0 0 60%,#9aa66f 60% 62%,#7d8a55 62%)}
.iac__p--4{background:linear-gradient(#F5480F,#F5480F) 72% 44%/22% 16% no-repeat,linear-gradient(160deg,transparent 56%,#6f7b4c 56%),linear-gradient(#cdd6da,#eef1f2)}
@container (max-width:380px){.iac__cap b{font-size:14px}.iac__p.is-on{flex-grow:7}.iac__hd span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){.iac__p,.iac__cap,.iac__v{transition:none}}

// Beeld-accordeon · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.iac')||root;var ps=[].slice.call(root.querySelectorAll('.iac__p')),cur=0,auto=!matchMedia('(prefers-reduced-motion: reduce)').matches;
function sel(i){cur=i;ps.forEach(function(p,j){p.classList.toggle('is-on',j===i);p.setAttribute('aria-expanded',j===i?'true':'false');});}
ps.forEach(function(p,i){p.addEventListener('mouseenter',function(){auto=false;sel(i);});p.addEventListener('focus',function(){auto=false;sel(i);});p.addEventListener('click',function(){auto=false;sel(i);});});
(function loop(){setTimeout(function(){if(!auto)return;sel((cur+1)%ps.length);loop();},2300);})();
}
init(document.querySelector('.jouw-container'));