How to add accordion animation to Collapsible

[piszczu4]

Hi, Collapsible component has no animation on click. I'd like to use the same animation as the accordion one. How can I do that?

[itaim18]

The collapsible component is pretty much exactly the component as it is in @radix-ui/primitives.
You could see a solution for your problem here.
I would implement it in a globals.css file as such:

@layer utilities {
  .CollapsibleContent {
    overflow: hidden;
  }
  .CollapsibleContent[data-state="open"] {
    animation: slideDown 300ms ease-out;
  }
  .CollapsibleContent[data-state="closed"] {
    animation: slideUp 300ms ease-out;
  }

  @keyframes slideDown {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes slideUp {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }
}

hope this satisfies your question :)