Faq - JS + CSS

Faq

Contoh Penggunaan

Pertanyaan Umum

Pahami berbagai informasi yang sering ditanyakan.
Pertanyaan 1
Pertanyaan 1 - Ini adalah jawaban pertanyaan 1.
Pertanyaan 2
Pertanyaan 2 - Ini adalah jawaban pertanyaan 2.
Pertanyaan 3
Pertanyaan 3 - Ini adalah jawaban pertanyaan 3.
<div class="flex flex-col gap-2 lg:gap-4 p-4 w-max-[300px]">
  <h1 class="text-3xl font-bold">Pertanyaan Umum</h1>
  <p class="inline-flex flex-wrap items-center m-0">
    Pahami berbagai informasi yang sering ditanyakan.&nbsp;
    <button type="button" class="ina-button ina-button--link ina-button--md">
      <span class="ina-button__text">Selengkapnya</span>
    </button>
  </p>
  <div class="flex flex-col w-full">
    <div class="ina-accordion-group" data-behavior="multiple">
      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="true">
          <div class="ina-accordion__title">Pertanyaan 1</div>
          <div class="ina-accordion__toggler">
            <svg
              class="ina-accordion__icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
          </div>
        </button>
        <div class="ina-accordion__content">
          <div class="ina-accordion__body">
            <p>Pertanyaan 1 - Ini adalah jawaban pertanyaan 1.</p>
          </div>
        </div>
      </div>

      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Pertanyaan 2</div>
          <div class="ina-accordion__toggler">
            <svg
              class="ina-accordion__icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
          </div>
        </button>
        <div class="ina-accordion__content">
          <div class="ina-accordion__body">
            <p>Pertanyaan 2 - Ini adalah jawaban pertanyaan 2.</p>
          </div>
        </div>
      </div>

      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Pertanyaan 3</div>
          <div class="ina-accordion__toggler">
            <svg
              class="ina-accordion__icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 9L12 15L18 9"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
          </div>
        </button>
        <div class="ina-accordion__content">
          <div class="ina-accordion__body">
            <p>Pertanyaan 3 - Ini adalah jawaban pertanyaan 3.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script is:inline>
  (function () {
    console.log('[InaUI FAQ Accordion] Initializing...');

    if (window.InaUI && typeof window.InaUI.initAccordion === 'function') {
      window.InaUI.initAccordion();
    } else {
      document.addEventListener('DOMContentLoaded', () => {
        if (window.InaUI && typeof window.InaUI.initAccordion === 'function') {
          window.InaUI.initAccordion();
        }
      });
    }
  })();
</script>