שאלות נפוצות

הפתיחה היא מעבר בין 0fr ל-1fr ברשת, ולכן היא חלקה גם כשלא יודעים מראש כמה טקסט יש בתשובה. aria-expanded על הכפתור הוא מה שמאפשר לקורא מסך לדעת אם התשובה פתוחה. בלעדיו זה סתם טקסט שמופיע ונעלם. שאלות נפוצות הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד. מתאים לעמודים ולמסמכים שעוסקים בשאלות נפוצות, נגישות ובלי ספריות. באותה סדרה יש גם ציר תהליך, קרוסלת המלצות ורצועת לוגואים.

רכיב · שאלות נפוצות · נגישות · בלי ספריות

<!-- שאלות נפוצות: הוסיפו עוד פריט בדיוק באותו מבנה -->
<style>
  .klix-faq { max-width: 34rem; border-radius: 1rem; overflow: hidden;
    background: rgba(15,23,42,.6); border: 1px solid rgba(255,255,255,.08) }
  .klix-faq-item + .klix-faq-item { border-top: 1px solid rgba(255,255,255,.08) }
  .klix-faq button { display: flex; width: 100%; gap: .75rem; align-items: center;
    justify-content: space-between; padding: 1rem; background: none; border: 0;
    color: inherit; font: inherit; font-weight: 700; text-align: start; cursor: pointer }
  .klix-faq button span:last-child { font-size: 1.25rem; transition: transform .3s ease }
  .klix-faq button[aria-expanded="true"] span:last-child { transform: rotate(45deg) }
  .klix-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease }
  .klix-faq button[aria-expanded="true"] + .klix-faq-panel { grid-template-rows: 1fr }
  .klix-faq-panel > div { overflow: hidden }
  .klix-faq-panel p { margin: 0; padding: 0 1rem 1rem; line-height: 1.7; color: #cbd5e1 }
  html[data-motion="off"] .klix-faq button span:last-child,
  html[data-motion="off"] .klix-faq-panel { transition: none }
</style>

<div class="klix-faq">
  <div class="klix-faq-item">
    <button type="button" aria-expanded="false"><span>כמה זמן לוקח לקבל הצעת מחיר?</span><span aria-hidden="true">+</span></button>
    <div class="klix-faq-panel"><div><p>עד יום עסקים אחד מרגע שקיבלנו את הפרטים.</p></div></div>
  </div>
  <div class="klix-faq-item">
    <button type="button" aria-expanded="false"><span>האם יש התחייבות?</span><span aria-hidden="true">+</span></button>
    <div class="klix-faq-panel"><div><p>אין. אפשר לעצור בכל חודש בלי קנס יציאה.</p></div></div>
  </div>
  <div class="klix-faq-item">
    <button type="button" aria-expanded="false"><span>אתם מוציאים חשבונית מס?</span><span aria-hidden="true">+</span></button>
    <div class="klix-faq-panel"><div><p>כן, חשבונית מס נשלחת במייל עם כל תשלום.</p></div></div>
  </div>
</div>

<script>
(function () {
  var SINGLE = true;  // האם רק שאלה אחת פתוחה בכל רגע

  var box = document.querySelector('.klix-faq');
  if (!box) return;

  box.addEventListener('click', function (e) {
    var btn = e.target.closest('button');
    if (!btn || !box.contains(btn)) return;

    var isOpen = btn.getAttribute('aria-expanded') === 'true';
    if (SINGLE) {
      box.querySelectorAll('button[aria-expanded="true"]').forEach(function (other) {
        other.setAttribute('aria-expanded', 'false');
      });
    }
    btn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
  });
})();
</script>