diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts
index 7edf1b5f76..d15a150a4b 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/index.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/index.ts
@@ -1,4 +1,5 @@
 export * from './autofocus.directive';
+export * from './collapse.directive';
 export * from './ellipsis.directive';
 export * from './for.directive';
 export * from './form-submit.directive';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts
new file mode 100644
index 0000000000..a50a0dc915
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts
@@ -0,0 +1,19 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+export const collapse = trigger('collapse', [
+  state(
+    'open',
+    style({
+      height: '*',
+      overflow: 'hidden',
+    }),
+  ),
+  state(
+    'close',
+    style({
+      height: '0px',
+      overflow: 'hidden',
+    }),
+  ),
+  transition('open <=> close', animate(350)),
+]);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
index 6a03cccac4..50772ccedc 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/index.ts
@@ -1,2 +1,3 @@
+export * from './collapse.animations';
 export * from './fade.animations';
 export * from './slide.animations';