diff --git a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
index a5025990dee657c83db7a6c00c8794f1a0aafe0a..53c396c0e4a0294d35a364e296c98ae30687464a 100644
--- a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
+++ b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
@@ -1,4 +1,19 @@
 <div class="space-y-1">
 	{{> atoms-accordeon-row }}
 	{{> atoms-accordeon-row }}
-</div>
\ No newline at end of file
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", setMaxHeights);
+window.addEventListener('resize', setMaxHeights);
+function setMaxHeights(){ 
+ // set height for css transition
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
+
+ if(accordeonRowBodies !== null) {
+  for (var i = 0; i < accordeonRowBodies.length; i++) {
+   accordeonRowBodies[i].style.maxHeight=accordeonRowBodies[i].scrollHeight + "px";
+   }; 
+ }
+}
+</script>
diff --git a/source/css/atoms/collapsibles.pcss b/source/css/atoms/collapsibles.pcss
index 2b6ff344d2c1654d8bad2bd51984f45beebb854b..2c473477b9451c3c3154c7f3dd2a9471652fdece 100644
--- a/source/css/atoms/collapsibles.pcss
+++ b/source/css/atoms/collapsibles.pcss
@@ -19,7 +19,7 @@
 	-o-transition: max-height 0.5s ease;
 	transition: max-height 0.5s ease;
 	p{
-	  	@apply px-8 pt-8 pb-14;
+	  	@apply px-8 pt-8 pb-14 box-border;
 	}
 }
 
@@ -29,6 +29,11 @@
 		@apply absolute top-1/2 right-8 transform -translate-y-2/4 rotate-90;
 	}
 	.accordeon-row-body{
-		max-height: 1000px;
+		max-height: 2000px; /*  max-height set by js, css fallback to high number */
+	}
+}
+.accordeon-row:not(.accordeon-row--open){
+	.accordeon-row-body{
+		max-height: 0px!important
 	}
 }
\ No newline at end of file