Lineone - Accordion Component

Basic Accordion

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

                
  <div x-data="{expandedItem:null}" class="mt-5 flex flex-col">
    <div x-data="accordionItem('item-1')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-2')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-3')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

Border Bottom

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

                
  <div
    x-data="{expandedItem:null}"
    class="mt-5 flex flex-col divide-y divide-slate-150 dark:divide-navy-500"
  >
    <div x-data="accordionItem('item-1')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-2')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-3')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center py-4 text-base font-medium text-slate-700 dark:text-navy-100"
      >
        <p>Accordion Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="pb-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

Full Bordered

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

                
  <div
    x-data="{expandedItem:null}"
    class="mt-5 flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500"
  >
    <div x-data="accordionItem('item-1')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-2')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-3')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

Divided Items

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

                
  <div
    x-data="{expandedItem:null}"
    class="mt-5 flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6"
  >
    <div
      x-data="accordionItem('item-1')"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="accordionItem('item-2')"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="accordionItem('item-3')"
      class="rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
      >
        <p>Accordion Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 pb-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

Primary Accordion

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

Accordion Item 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

Tag 1 Tag 2

                
  <div
    x-data="{expandedItem:null}"
    class="mt-5 flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent"
  >
    <div x-data="accordionItem('item-1')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Accordion Item 1</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-2')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Accordion Item 2</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
    <div x-data="accordionItem('item-3')">
      <div
        @click="expanded = !expanded"
        class="flex cursor-pointer justify-between items-center bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
      >
        <p>Accordion Item 3</p>
        <div
          :class="expanded && '-rotate-180'"
          class="text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
        >
          <i class="fas fa-chevron-down"></i>
        </div>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-2 flex  space-x-2">
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
            >
              Tag 2
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

Advanced Accordion

Code

The accordion component allows the user to show and hide sections of related content on a page. Check out code for detail of usage.

Simon Tods

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

KG

Konnor Guzman

Frontend Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

Derrick Simmons

UI/UX Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi earum magni officiis possimus repellendus. Accusantium adipisci aliquid praesentium quaerat voluptate.

jd

                    
  <div
    x-data="{expandedItem:null}"
    class="mt-5 flex flex-col space-y-4 sm:space-y-5 lg:space-y-6"
  >
    <div
      x-data="accordionItem('item-1')"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <img
              class="rounded-full"
              src="images/avatar/avatar-10.jpg"
              alt="avatar"
            />
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Simon Tods
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              Web Developer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="accordionItem('item-2')"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <div
              class="is-initial rounded-full bg-warning uppercase text-white"
            >
              KG
            </div>
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Konnor Guzman
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              Frontend Developer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="accordionItem('item-3')"
      class="overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
    >
      <div
        class="flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
      >
        <div
          class="flex items-center  space-x-3.5 tracking-wide outline-hidden transition-all"
        >
          <div class="avatar size-10">
            <img
              class="rounded-full"
              src="images/avatar/avatar-19.jpg"
              alt="avatar"
            />
          </div>
          <div>
            <p class="text-slate-700 line-clamp-1 dark:text-navy-100">
              Derrick Simmons
            </p>
            <p class="text-xs text-slate-500 dark:text-navy-300">
              UI/UX Designer
            </p>
          </div>
        </div>
        <button
          @click="expanded = !expanded"
          class="btn -mr-1.5 size-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
        >
          <i
            :class="expanded && '-rotate-180'"
            class="fas fa-chevron-down text-sm transition-transform"
          ></i>
        </button>
      </div>
      <div x-collapse x-show="expanded">
        <div class="px-4 py-4 sm:px-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
            earum magni officiis possimus repellendus. Accusantium adipisci
            aliquid praesentium quaerat voluptate.
          </p>
          <div class="mt-4 flex justify-between">
            <div class="flex flex-wrap -space-x-2">
              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-16.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <div
                  class="is-initial rounded-full bg-info text-xs-plus uppercase text-white ring-2 ring-white dark:ring-navy-700"
                >
                  jd
                </div>
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-8.jpg"
                  alt="avatar"
                />
              </div>

              <div class="avatar size-7 hover:z-10">
                <img
                  class="rounded-full ring-2 ring-white dark:ring-navy-700"
                  src="images/avatar/avatar-5.jpg"
                  alt="avatar"
                />
              </div>
            </div>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Accordion

Basic Accordion

Border Bottom

Full Bordered

Divided Items

Primary Accordion

Advanced Accordion