CSS06 · אקורדיון חלק

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}

/* CSS06 · אקורדיון חלק */
.acc{max-width:560px;margin-inline:auto}
.acc-item{border-bottom:1px solid var(--line, #e4e4ee)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;background:none;border:0;color:inherit;
font-family:inherit;font-size:17px;font-weight:600;padding-block:20px;cursor:pointer;text-align:start}
.acc-q .chev{transition:rotate .2s}
.acc-item.open .chev{rotate:180deg}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.6,.2,1)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a>div{overflow:hidden;color:var(--muted, #6a6d85);max-width:60ch}
.acc-a p{margin:0 0 20px}

HTML

<div class="stage tight"><div class="acc">
<div class="acc-item open"><button class="acc-q">איך זה עובד בלי JS למדידת גובה?<span class="chev">▾</span></button>
<div class="acc-a"><div><p>grid-template-rows עובר מ-0fr ל-1fr, והדפדפן עושה את כל העבודה.</p></div></div></div>
<div class="acc-item"><button class="acc-q">וזה עובד בכל הדפדפנים?<span class="chev">▾</span></button>
<div class="acc-a"><div><p>כן, כל הדפדפנים המודרניים תומכים במעבר על fr.</p></div></div></div>
<div class="acc-item"><button class="acc-q">מה עם נגישות?<span class="chev">▾</span></button>
<div class="acc-a"><div><p>הכפתור אמיתי, מקלדת עובדת, והתוכן נשאר ב-DOM.</p></div></div></div>
</div></div>

JS

document.querySelectorAll(".acc-q").forEach(q=>q.addEventListener("click",()=>{
  q.closest(".acc-item").classList.toggle("open");
}));