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 :)

[rohittiwari-dev]

Here is the best thing you can get with smooth animation of opening and closing of collapssible content

no need to pass classname or any other configuration install shadcn collapsible copy this css in your global.css and you are good to go it will read the data slots from collapsible add css accordingly

for tailwindcss v4 implementation

@layer utilities {
	[data-slot='collapsible-content'] {
		overflow: hidden;
		transition:
			max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
			opacity 200ms ease-out;
	}

	[data-slot='collapsible-content'][data-state='open'],
	[data-slot='collapsible-content'][data-state='closed'] {
		will-change: max-height, opacity;
		transform: translateZ(0);
		backface-visibility: hidden;
	}

	[data-slot='collapsible-content'][data-state='open'] {
		animation: smoothDown 300ms ease-out forwards;
	}

	[data-slot='collapsible-content'][data-state='closed'] {
		animation: smoothUp 250ms ease-in forwards;
	}

	@keyframes smoothDown {
		from {
			max-height: 0;
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			max-height: var(--radix-collapsible-content-height);
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes smoothUp {
		from {
			max-height: var(--radix-collapsible-content-height);
			opacity: 1;
			transform: translateY(0);
		}
		to {
			max-height: 0;
			opacity: 0;
			transform: translateY(-4px);
		}
	}
}

for tailwindcss v3 implemention some extra step needed
step -1 add respective styles from this config to your tailwind css config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        smoothDown: 'smoothDown 300ms cubic-bezier(0.16, 1, 0.3, 1)',
        smoothUp: 'smoothUp 250ms cubic-bezier(0.4, 0, 0.2, 1)'
      },
      keyframes: {
        smoothDown: {
          from: {
            maxHeight: '0',
            opacity: '0',
            transform: 'translateY(-4px)'
          },
          to: {
            maxHeight: 'var(--radix-collapsible-content-height)',
            opacity: '1',
            transform: 'translateY(0)'
          }
        },
        smoothUp: {
          from: {
            maxHeight: 'var(--radix-collapsible-content-height)',
            opacity: '1',
            transform: 'translateY(0)'
          },
          to: {
            maxHeight: '0',
            opacity: '0',
            transform: 'translateY(-4px)'
          }
        }
      }
    }
  }
}

step-2 just copy this and replace this function to your shadcn collapsible content in components/ui/collapsible.tsx

function CollapsibleContent({
        className,
	...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
	return (
		<CollapsiblePrimitive.CollapsibleContent
			data-slot="collapsible-content"
                        className={cn("overflow-hidden transform-gpu backface-visibility-hidden transition-[max-height,opacity] duration-300 data-[state=open]:animate-smoothDown data-[state=closed]:animate-smoothUp", className)}
			{...props}
		/>
	);
}

[kein-1]

This did not work for me