From c6a14c06bdc531f8fd6b9a1442a4973bd0d2c154 Mon Sep 17 00:00:00 2001
From: "fanky.eu" <jakub.webisti@gmail.com>
Date: Fri, 16 Apr 2021 13:26:52 +0200
Subject: [PATCH] accordeon - js to smooth collapse
---
.../22-accordeon/accordeon.mustache | 17 ++++++++++++++++-
source/css/atoms/collapsibles.pcss | 9 +++++++--
2 files changed, 23 insertions(+), 3 deletions(-)
diff --git a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
index a502599..53c396c 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 2b6ff34..2c47347 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
--
GitLab