שאלות נפוצות

הפתיחה היא מעבר בין 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>