Accordion

Docs

Accordion

Tailwind Accordion is a collapsible UI element built using Tailwind. It allows users to expand and collapse sections of content by clicking on headers, revealing and hiding information on demand.

Examples

Basic Usage

Use data-kt-accordion selector to enable accordion behavior where clicking a section header expands its content, while others collapse.

<div data-kt-accordion="true" class="kt-accordion">
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_0"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_0"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >How is pricing determined for each plan?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_0"
      id="accordion_content_0"
    >
      <div class="kt-accordion-wrapper">
        KtUI embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_1"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_1"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >What payment methods are accepted for subscriptions?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_1"
      id="accordion_content_1"
    >
      <div class="kt-accordion-wrapper">
        KtUI embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_2"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_2"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >Are there any hidden fees in the pricing?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_2"
      id="accordion_content_2"
    >
      <div class="kt-accordion-wrapper">
        KtUI embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
</div>

Default Open

Use active class on an accordion to display a specific section by default.

<div data-kt-accordion="true" class="kt-accordion">
  <div data-kt-accordion-item="true" class="kt-accordion-item active">
    <button
      id="accordion_toggle_0"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_0"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >How is pricing determined for each plan?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content"
      aria-labelledby="accordion_toggle_0"
      id="accordion_content_0"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_1"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_1"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >What payment methods are accepted for subscriptions?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_1"
      id="accordion_content_1"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_2"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_2"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >Are there any hidden fees in the pricing?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_2"
      id="accordion_content_2"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
</div>

Expand All

Use data-kt-accordion-expand-all="true" attribute to keep all accordions visible at all times despite toggling.

<div
  data-kt-accordion="true"
  data-kt-accordion-expand-all="true"
  class="kt-accordion"
>
  <div data-kt-accordion-item="true" class="kt-accordion-item active">
    <button
      id="accordion_toggle_0"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_0"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >How is pricing determined for each plan?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content"
      aria-labelledby="accordion_toggle_0"
      id="accordion_content_0"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_1"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_1"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >What payment methods are accepted for subscriptions?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_1"
      id="accordion_content_1"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_2"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_2"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >Are there any hidden fees in the pricing?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_2"
      id="accordion_content_2"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
</div>

Outline Style

Apply kt-accordion-outline class to add custom border styles to your accordion.

<div
  data-kt-accordion="true"
  data-kt-accordion-expand-all="true"
  class="kt-accordion kt-accordion-outline"
>
  <div data-kt-accordion-item="true" class="kt-accordion-item active">
    <button
      id="accordion_toggle_0"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_0"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >How is pricing determined for each plan?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content"
      aria-labelledby="accordion_toggle_0"
      id="accordion_content_0"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_1"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_1"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >What payment methods are accepted for subscriptions?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_1"
      id="accordion_content_1"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
  <div data-kt-accordion-item="true" class="kt-accordion-item">
    <button
      id="accordion_toggle_2"
      data-kt-accordion-toggle="true"
      aria-controls="accordion_content_2"
      class="kt-accordion-toggle"
    >
      <span class="kt-accordion-title"
        >Are there any hidden fees in the pricing?</span
      ><span aria-hidden="true" class="kt-accordion-indicator"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-plus kt-accordion-indicator-on"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path></svg
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-minus kt-accordion-indicator-off"
          aria-hidden="true"
        >
          <path d="M5 12h14"></path></svg
      ></span>
    </button>
    <div
      class="kt-accordion-content hidden"
      aria-labelledby="accordion_toggle_2"
      id="accordion_content_2"
    >
      <div class="kt-accordion-wrapper">
        Reui embraces flexible licensing options that empower you to choose the
        perfect fit for your project&#x27;s needs and budget.
      </div>
    </div>
  </div>
</div>

Use accordion to handle advanced navigation menus.

<div class="sm:w-56 border border-border rounded-md p-2">
  <ul data-kt-accordion="true" class="kt-accordion-menu">
    <li class="kt-accordion-menu-item selected" data-kt-accordion-item="true">
      <a href="#" class="kt-accordion-menu-link"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-house kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
          <path
            d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
          ></path></svg
        >Dashboard</a
      >
    </li>
    <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
      <button
        data-kt-accordion-toggle="true"
        id="menu_users"
        aria-controls="menu_users_sub"
        class="kt-accordion-menu-toggle"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-users kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
          <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
          <circle cx="9" cy="7" r="4"></circle></svg
        >Users<svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevron-down kt-accordion-menu-indicator"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div
        id="menu_users_sub"
        class="kt-accordion-menu-content hidden"
        aria-labelledby="menu_users"
      >
        <ul class="kt-accordion-menu-sub">
          <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
            <button
              data-kt-accordion-toggle="true"
              id="menu_users_sub_1"
              aria-controls="menu_users_sub_1_sub"
              class="kt-accordion-menu-toggle"
            >
              Sub menu 1<svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-chevron-down kt-accordion-menu-indicator"
                aria-hidden="true"
              >
                <path d="m6 9 6 6 6-6"></path>
              </svg>
            </button>
            <div
              id="menu_users_sub_1_sub"
              class="kt-accordion-menu-content hidden"
              aria-labelledby="menu_users_sub_1"
            >
              <ul class="kt-accordion-menu-sub">
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 1</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 2</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 3</a>
                </li>
              </ul>
            </div>
          </li>
          <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
            <button
              data-kt-accordion-toggle="true"
              id="menu_users_sub_2"
              aria-controls="menu_users_sub_2_sub"
              class="kt-accordion-menu-toggle"
            >
              Sub menu 2<svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-chevron-down kt-accordion-menu-indicator"
                aria-hidden="true"
              >
                <path d="m6 9 6 6 6-6"></path>
              </svg>
            </button>
            <div
              id="menu_users_sub_2_sub"
              class="kt-accordion-menu-content hidden"
              aria-labelledby="menu_users_sub_2"
            >
              <ul class="kt-accordion-menu-sub">
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 1</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 2</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 3</a>
                </li>
              </ul>
            </div>
          </li>
          <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
            <button
              data-kt-accordion-toggle="true"
              id="menu_users_sub_3"
              aria-controls="menu_users_sub_3_sub"
              class="kt-accordion-menu-toggle"
            >
              Sub menu 3<svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-chevron-down kt-accordion-menu-indicator"
                aria-hidden="true"
              >
                <path d="m6 9 6 6 6-6"></path>
              </svg>
            </button>
            <div
              id="menu_users_sub_3_sub"
              class="kt-accordion-menu-content hidden"
              aria-labelledby="menu_users_sub_3"
            >
              <ul class="kt-accordion-menu-sub">
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 1</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 2</a>
                </li>
                <li data-kt-accordion-item="true">
                  <a href="#" class="kt-accordion-menu-link">Link 3</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </li>
    <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
      <button
        data-kt-accordion-toggle="true"
        id="menu_tasks"
        aria-controls="menu_tasks_sub"
        class="kt-accordion-menu-toggle"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-list-todo kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <rect x="3" y="5" width="6" height="6" rx="1"></rect>
          <path d="m3 17 2 2 4-4"></path>
          <path d="M13 6h8"></path>
          <path d="M13 12h8"></path>
          <path d="M13 18h8"></path></svg
        >Tasks<svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevron-down kt-accordion-menu-indicator"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div
        id="menu_tasks_sub"
        class="kt-accordion-menu-content hidden"
        aria-labelledby="menu_tasks"
      >
        <ul class="kt-accordion-menu-sub">
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 1</a>
          </li>
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 2</a>
          </li>
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 3</a>
          </li>
        </ul>
      </div>
    </li>
    <li class="kt-accordion-menu-item" data-kt-accordion-item="true">
      <button
        data-kt-accordion-toggle="true"
        id="menu_events"
        aria-controls="menu_events_sub"
        class="kt-accordion-menu-toggle"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-calendar-days kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <path d="M8 2v4"></path>
          <path d="M16 2v4"></path>
          <rect width="18" height="18" x="3" y="4" rx="2"></rect>
          <path d="M3 10h18"></path>
          <path d="M8 14h.01"></path>
          <path d="M12 14h.01"></path>
          <path d="M16 14h.01"></path>
          <path d="M8 18h.01"></path>
          <path d="M12 18h.01"></path>
          <path d="M16 18h.01"></path></svg
        >Events<svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevron-down kt-accordion-menu-indicator"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div
        id="menu_events_sub"
        class="kt-accordion-menu-content hidden"
        aria-labelledby="menu_events"
      >
        <ul class="kt-accordion-menu-sub">
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 1</a>
          </li>
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 2</a>
          </li>
          <li data-kt-accordion-item="true">
            <a href="#" class="kt-accordion-menu-link">Link 3</a>
          </li>
        </ul>
      </div>
    </li>
    <li data-kt-accordion-item="true">
      <a href="#" class="kt-accordion-menu-link"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-bell kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
          <path
            d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
          ></path></svg
        >Notifications<span
          class="kt-badge kt-badge-primary kt-badge-sm kt-badge-circle ms-auto"
          >New</span
        ></a
      >
    </li>
    <li data-kt-accordion-item="true">
      <a href="#" class="kt-accordion-menu-link"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-settings kt-accordion-menu-icon"
          aria-hidden="true"
        >
          <path
            d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
          ></path>
          <circle cx="12" cy="12" r="3"></circle></svg
        >Settings</a
      >
    </li>
  </ul>
</div>

Component API

Options

These data attributes allow you to set options for the accordion component during auto initialization.

Option	Type	Default	Description
`data-kt-accordion-expand-all`	boolean	~~false~~	Using ~~true~~ allows all accordion sections to remain expanded even when another is opened.
`data-kt-accordion-hidden-class`	string	~~"hidden"~~	Tailwind class to use for the hidden state of the accordion contents.
`data-kt-accordion-active-class`	string	~~"active"~~	Custom class to use for the active state of the accordion contents.

Selectors

This table details the custom classes and data attributes used by the accordion component.

Name	Description
Data Attributes
`data-kt-accordion="true"`	A selector used to auto-initialize the accordion object on page load.
`data-kt-accordion-item="true"`	Used to identify individual accordion item elements within the accordion structure.
`data-kt-accordion-toggle="#content_id"`	Specifies an ID of an element that should be shown or hidden when the accordion header is clicked.
Classes
`active`	Sets a specific accordion item to be open initially when used together with ~~data-kt-accordion-item~~ selector.
`hidden`	Sets a specific accordion content to be hidden initially when used together with ~~data-kt-accordion-item~~ selector.

Tailwind Modifiers

Custom modifiers to control the accordion’s style and behavior with Tailwind classes.

Name	Description
`kt-accordion-active:*`	A modifier that applies specific Tailwind classes when the section becomes active.

Methods

Use KTAccordion component's API methods to programmatically control its behavior.

Method	Description
`new KTAccordion(element, options)`	Creates an object instance of KTAccordion class for the given DOM -element- and configuration ~~options~~.
`show(element)`	Shows the accordion section that corresponds to the given DOM ~~element~~.
`hide(element)`	Hides the accordion section that corresponds to the given DOM ~~element~~.
`toggle(element)`	Toggles the accordion section that corresponds to the given DOM ~~element~~.
`getOption(name)`	Retrieves the value of a configuration option by ~~name~~ parameter from a KTAccordion instance.
`getElement()`	Retrieves the DOM element linked to a specific KTAccordion instance.
`on(eventName, handler)`	Allows attaching event listeners to the KTAccordion custom events using the ~~eventName~~ and ~~eventId~~ string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTAccordion. The function returns ~~string~~ as a unique identifier for the registered listener, allowing you to remove it later if needed.
`off(eventName, eventId)`	Removes an event listener for the ~~eventName~~ and ~~eventId~~ parameters attached with the on method.
`dispose()`	Removes the KTAccordion instance from an element, including any associated data stored on the DOM element.

// Accordion element
const accordionEl = document.querySelector('#my_accordion');
 
// Accordion item element
const accordionItemEl = document.querySelector('#my_accordion_item_1');
 
// Get instance of the initialized accordion object
const accordion = KTAccordion.getInstance(accordionEl);
 
// Create a new instance on demand.
const newAccordion = new KTAccordion(accordionEl, {
  expandAll: false,
});
 
// Public methods
accordion.show(accordionItemEl);
accordion.hide(accordionItemEl);
accordion.toggle(accordionItemEl);

To initialize Tailwind Accordion with JavaScript, use data-accordion="false" attribute instead. This prevents automatic initialization on page load.

Utilities

Manage and interact with KTAccordion instances using these static methods of KTAccordion JavaScript class.

Method	Description
`init()`	Automatically initializes ~~KTAccordion~~ object for all elements with the ~~data-kt-accordion~~ attribute on page load.
`createInstances()`	Allows to create ~~KTAccordion~~ instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the ~~KTAccordion~~ object associated with the given DOM element ~~element~~.
`getOrCreateInstance(element)`	Returns the existing ~~KTAccordion~~ object for the provided DOM element ~~element~~, or creates a new instance if none exists, then returns the same.

// Initialize all accordions
KTAccordion.init();
 
// Initialzie pending accordions
KTAccordion.createInstances();
 
// Get accordion object
const accordionEl = document.querySelector('#my_accordion');
const accordion = KTAccordion.getInstance(accordionEl);

Event

KTAccordion custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.

Event	Description
`show`	Triggered immediately before an accordion section is shown.
`shown`	Triggered immediately after an accordion section is shown.
`hide`	Triggered immediately before an accordion section is hidden.
`hidden`	Triggered immediately after an accordion section is hidden.
`toggle`	Triggered immediately before an accordion section is toggled (shown/hidden).

const accordionEl = document.querySelector('#my_accordion');
const accordion = KTAccordion.getInstance(accordionEl);
 
accordion.on('show', () => {
  console.log('show event');
});
 
accordion.on('shows', () => {
  console.log('shown event');
});
 
accordion.on('hide', (detail) => {
  detail.cancel = true;
  console.log('hide action canceled');
});

PreviouseMetronic Template NextAvatar

On This Page

Examples
Component API

Accordion

Examples

Basic Usage

Default Open

Expand All

Outline Style

Navigation Menu

Component API

Options

Selectors

Tailwind Modifiers

Methods

Utilities

Event