Accordion

An accordioning is used to display a list of items that can be expanded and collapsed.

Apple

Apples are crisp, juicy fruits with a sweet or tart flavor. They come in various colors such as red, green, and yellow.

Banana

Bananas are elongated, curved fruits with a creamy flesh inside. They are rich in potassium and are commonly eaten as a healthy snack.

Orange

Oranges are round citrus fruits with a bright orange skin and juicy flesh. They are known for their high vitamin C content and refreshing taste.

Zag.js Reference Show Code

---
const items = [
  {
    name: "Apple",
    description:
      "Apples are crisp, juicy fruits with a sweet or tart flavor. They come in various colors such as red, green, and yellow."
  },
  {
    name: "Banana",
    description:
      "Bananas are elongated, curved fruits with a creamy flesh inside. They are rich in potassium and are commonly eaten as a healthy snack."
  },
  {
    name: "Orange",
    description:
      "Oranges are round citrus fruits with a bright orange skin and juicy flesh. They are known for their high vitamin C content and refreshing taste."
  }
]
---

<div x-cloak x-data x-accordion>
  {
    items.map(({ name, description }) => (
      <div x-accordion:item={`'${name}'`}>
        <button x-accordion:item-trigger={`'${name}'`}>
          {name}
          <div x-accordion:item-indicator={`'${name}'`}>
            <i class="i-lucide-chevron-down w-5 h-5" />
          </div>
        </button>
        <div x-cloak x-accordion:item-content={`'${name}'`}>
          <p class="text-sm py-2 px-4 leading-relaxed">{description}</p>
        </div>
      </div>
    ))
  }
</div>

<style>
  [data-part="root"] {
    @apply w-72 md:w-96 bg-white border border-zinc-200/60 rounded-md shadow-sm overflow-hidden;
  }

  [data-part="item"][data-state="open"] + [data-part="item"] [data-part="item-trigger"] {
    @apply border-t;
  }

  [data-part="item-trigger"] {
    @apply flex items-center border-b bg-white border-zinc-200/60 justify-between w-full p-4 font-medium text-base text-zinc-700 text-left cursor-pointer;
  }

  [data-part="item-content"] {
    @apply text-zinc-500 overflow-hidden;
  }

  [data-part="item-indicator"] {
    @apply inline-flex items-center justify-center transition-transform duration-200 ease-in-out;
  }

  [data-part="item-indicator"][data-state="open"] {
    @apply rotate-180;
  }

  [data-part="item-indicator"][data-state="closed"] {
    @apply rotate-0;
  }

  @keyframes expand {
    from {
      height: 0;
    }
    to {
      height: var(--height);
    }
  }

  @keyframes collapse {
    from {
      height: var(--height);
    }
    to {
      height: 0;
    }
  }

  [data-part="item-content"][data-state="open"] {
    animation: expand 200ms cubic-bezier(0, 0, 0.38, 0.9);
  }

  [data-part="item-content"][data-state="closed"] {
    animation: collapse 200ms cubic-bezier(0, 0, 0.38, 0.9);
  }
</style>