B30 · אקורדיון שאלות ותשובות

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}

/* B30 · אקורדיון שאלות ותשובות */
.faq{max-width:min(760px,92vw);margin-inline:auto;border-top:1px solid var(--line, #e4e4ee)}
.faq-item{border-bottom:1px solid var(--line, #e4e4ee)}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;background:none;border:0;font:inherit;font-size:clamp(16px,1.6vw,21px);
  font-weight:600;color:var(--ink, #16182b);text-align:start;padding:clamp(18px,2vw,26px) 4px;cursor:pointer}
.faq-q:hover{color:var(--accent, #4a3aff)}
.faq-ic{margin-inline-start:auto;flex:none;width:22px;height:22px;position:relative}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .35s cubic-bezier(.2,.6,.2,1),opacity .25s}
.faq-ic::before{inset-inline:0;top:10px;height:2px}
.faq-ic::after{inset-block:0;left:10px;width:2px}
.faq-item.open .faq-ic::after{transform:rotate(90deg);opacity:0}
/* grid-template-rows מ-0fr ל-1fr נותן פתיחה לגובה האמיתי בלי למדוד פיקסלים ב-JS */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.2,.6,.2,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 4px clamp(20px,2.2vw,30px);color:var(--muted, #6a6d85);font-size:16px;line-height:1.7;max-width:62ch}
@media (prefers-reduced-motion: reduce){.faq-a{transition-duration:.01ms}}

HTML

<div class="stage tight"><div class="faq">
  <div class="faq-item"><button class="faq-q" aria-expanded="false">כמה זמן לוקח לבנות אתר?<span class="faq-ic" aria-hidden="true"></span></button>
    <div class="faq-a"><div><p>דף נחיתה בין שבוע לשבועיים, אתר תדמית מלא בין שלושה לחמישה שבועות. הזמן נמדד מרגע שכל החומרים אצלנו, ורוב העיכובים בפרויקטים מגיעים משם.</p></div></div></div>
  <div class="faq-item"><button class="faq-q" aria-expanded="false">מה צריך להכין מראש?<span class="faq-ic" aria-hidden="true"></span></button>
    <div class="faq-a"><div><p>לוגו בקובץ וקטורי, תמונות באיכות גבוהה, וטקסטים ראשוניים. אם אין, אנחנו כותבים ומצלמים, וזה מתומחר בנפרד.</p></div></div></div>
  <div class="faq-item"><button class="faq-q" aria-expanded="false">האתר יתאים למובייל?<span class="faq-ic" aria-hidden="true"></span></button>
    <div class="faq-a"><div><p>כל אתר נבנה קודם למובייל ורק אחר כך לדסקטופ, כי שם נמצאים רוב הגולשים. כל סקשן נבדק בשלושה רוחבי מסך לפני עלייה לאוויר.</p></div></div></div>
  <div class="faq-item"><button class="faq-q" aria-expanded="false">מה קורה אחרי העלייה לאוויר?<span class="faq-ic" aria-hidden="true"></span></button>
    <div class="faq-a"><div><p>חודש ליווי כלול, ואחריו אפשר חבילת תחזוקה חודשית שכוללת גיבויים, עדכוני אבטחה ושינויי תוכן קטנים.</p></div></div></div>
</div></div>

JS

(function(){
  const items=[...document.querySelectorAll(".faq-item")];
  const SINGLE=true; // רק אחת פתוחה בכל רגע. שנה ל-false אם רוצים לאפשר כמה
  items.forEach(item=>{
    const btn=item.querySelector(".faq-q");
    btn.addEventListener("click",()=>{
      const open=item.classList.contains("open");
      if(SINGLE)items.forEach(o=>{o.classList.remove("open");o.querySelector(".faq-q").setAttribute("aria-expanded","false");});
      item.classList.toggle("open",!open);
      btn.setAttribute("aria-expanded",String(!open));
    });
  });
})();