Accordion - JS + CSS

Accordion

Struktur HTML


<div class="ina-accordion">
  <button
    type="button"
    class="ina-accordion__toggle"
    aria-expanded="false"
    aria-controls="accordion-content-1"
  >
    <div class="ina-accordion__title">Accordion Item 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"
        />
      </svg>
    </div>
  </button>
  <div
    id="accordion-content-1"
    class="ina-accordion__content"
    aria-labelledby="accordion-header-1"
  >
    <div class="ina-accordion__body">
      <p>Isi konten panel pertama. Anda bisa menambahkan konten apapun di sini.</p>
    </div>
  </div>
</div>

Contoh Penggunaan

Basic Usage (Single Open)

Question 1

Answer 1 - This is a basic accordion.

Question 2

Answer 2 - Only one item can be open at a time in this group.

Multiple Open

Multiple Item 1

Answer 1 - Compare this with the single-open group above.

Multiple Item 2

Answer 2 - You can open multiple items here.

<div class="flex flex-col gap-8">
  <!-- Basic -->
  <div class="flex flex-col w-full">
    <p class="block mb-2 font-medium">Basic Usage (Single Open)</p>
    <div class="ina-accordion-group" data-behavior="single">
      <!-- Item 1 -->
      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Question 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>Answer 1 - This is a basic accordion.</p>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Question 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>Answer 2 - Only one item can be open at a time in this group.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Multiple Open -->
  <div class="flex flex-col w-full">
    <p class="block mb-2 font-medium">Multiple Open</p>
    <div class="ina-accordion-group" data-behavior="multiple">
      <!-- Item 1 -->
      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Multiple Item 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>Answer 1 - Compare this with the single-open group above.</p>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="ina-accordion">
        <button type="button" class="ina-accordion__toggle" aria-expanded="false">
          <div class="ina-accordion__title">Multiple Item 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>Answer 2 - You can open multiple items here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

    // Initialize Accordion
    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>