accordeon - js to smooth collapse

source/_patterns/01-molecules/22-accordeon/accordeon.mustache

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

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