Collapsible

A collapsible component is used to display content that can be expanded and collapsed.

You have 3 new notifications

Someone mentioned you.

You have a new email.

You have a text message.

Zag.js Reference Show Code

---

---

<div x-cloak x-data x-collapsible>
  <div class="flex justify-between items-center">
    <div class="text-sm">You have 3 new notifications</div>
    <button x-collapsible:trigger>
      <i class="i-lucide-plus w-5 h-5"></i>
    </button>
  </div>

  <div data-part="messages">
    <div data-part="message" class="!mb-0">Someone mentioned you.</div>
    <div x-collapsible:content>
      <div data-part="message">You have a new email.</div>
      <div data-part="message">You have a text message.</div>
    </div>
  </div>
</div>

<style>
  [data-part="root"] {
    @apply w-64;
  }

  [data-part="trigger"] {
    @apply inline-flex justify-center items-center w-6 h-6 bg-white text-zinc-900 border border-zinc-200/60 rounded-full cursor-pointer;
  }

  [data-part="trigger"] > i {
    @apply transition-transform duration-200 ease-in-out;
  }

  [data-part="trigger"][data-state="open"] > i {
    @apply rotate-45;
  }

  [data-part="trigger"][data-state="closed"] > i {
    @apply rotate-0;
  }

  [data-part="content"] {
    @apply overflow-hidden;
  }

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

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

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

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

  [data-part="message"] {
    @apply my-2 px-3 py-2 bg-white text-sm text-zinc-800 rounded border border-zinc-200/60;
  }
</style>