Problem context fadeout. Don't forget to implement js scripts in...

Problem context fadeout. Don't forget to implement js scripts in accordeon-row-fadeout.mustache and accordeon.mustache for smooth open effect

source/_patterns/00-atoms/18-collapsibles/accordeon-row-fadeout.mustache

+<div class="accordeon-row accordeon-row--fadeout h-full">
+	<div class="accordeon-row-head"  v-on:click="toggleElement" onclick="if(this.parentElement.classList.contains('accordeon-row--open')) this.parentElement.classList.remove('accordeon-row--open'); else this.parentElement.classList.add('accordeon-row--open');">
+		<h3 class="accordeon-row-heading head-alt-xs mb-0">{{^ heading }}{{ headline.short }}{{/ heading }}{{ heading }}</h3>
+		<i class="ico--chevron-down"></i>
+	</div>
+	<div class="accordeon-row-body accordeon-row-body--fadeout" style="height:220px">
+	 <div>
+		<p>{{ description }}</p>
+		<p>{{ description }}</p>
+		<p>{{ description }}</p>
+		<p>{{ description }}</p>
+	 </div>
+	</div>
+	<button class="btn btn--icon absolute bottom-8 left-8" onclick="this.parentElement.classList.add('accordeon-row--open');">
+	  <div class="btn__body-wrap">
+	    <div class="btn__body bg-acidgreen -bottom-20 text-black py-4">Zobrazit více</div>
+	    <div class="btn__icon bg-black">
+	      <i class="ico--chevron-right"></i>
+	    </div>
+	  </div>
+	</button>
+</div>
+<script>
+/*should run once on any page accordeon rows with fadeouts are present*/
+document.addEventListener("DOMContentLoaded", setMaxHeightsFadeouts);
+window.addEventListener('resize', setMaxHeightsFadeouts);
+function setMaxHeightsFadeouts(){ 
+ // set height for css transition
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--fadeout');
+
+ if(accordeonRowBodies !== null) {
+  for (var i = 0; i < accordeonRowBodies.length; i++) {
+   accordeonRowBodies[i].style.maxHeight=(parseInt(accordeonRowBodies[i].scrollHeight) + 32) + "px";
+   };/*plus padding*/ 
+ }
+}
+</script>

source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache

@@ -3,7 +3,7 @@
 		<h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
 		<i class="ico--chevron-down"></i>
 	</div>
-	<div class="accordeon-row-body">
+	<div class="accordeon-row-body accordeon-row-body--classic">
 	 <div>
 		<p>{{ description }}</p>
 	 </div>

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

@@ -5,7 +5,7 @@
 			<h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
 			<i class="ico--chevron-down"></i>
 		</div>
-		<div class="accordeon-row-body">
+		<div class="accordeon-row-body accordeon-row-body--classic">
 		 <div>
 			<p>Some <b>rich text</b> description. {{ description }} Some <a href="#">rich text</a> description. </p>
 		 </div>
@@ -19,7 +19,7 @@ document.addEventListener("DOMContentLoaded", setMaxHeights);
 window.addEventListener('resize', setMaxHeights);
 function setMaxHeights(){ 
  // set height for css transition
- var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body');
+ var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--classic');
 
  if(accordeonRowBodies !== null) {
   for (var i = 0; i < accordeonRowBodies.length; i++) {

source/_patterns/01-molecules/25-problems/problems-pirati-stan.mustache

@@ -4,7 +4,7 @@
              <h2 class="head-alt-sm md:head-alt-md mb-9">Problém</h2>
                 <p class="text-base mb-8">{{> atoms-paragraph-with-sources }}</p>
                 <div id="proc-je-to-problem">
-                    {{> atoms-accordeon-row-preview }}
+                    {{> atoms-accordeon-row-fadeout }}
                 </div>
         </div>
     <div id="nase-vize" class="ideal-check"><i class="ico--check text-xs sm:text-xl text-black"></i></div>

source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache

@@ -119,20 +119,3 @@
 </div>
 
 {{> organisms-footer-pirati-stan }}
-<script>
-/*copied from molecules/accordeon-preview.mustache.*/
-/*should run once on any page accordeon rows with previews are present*/
-document.addEventListener("DOMContentLoaded", setMaxHeightsPreviews);
-window.addEventListener('resize', setMaxHeightsPreviews);
-function setMaxHeightsPreviews(){ 
- // set height for css transition
- var accordeonRowBodies = document.getElementsByClassName('accordeon-row-body--preview');
-
- if(accordeonRowBodies !== null) {
-  for (var i = 0; i < accordeonRowBodies.length; i++) {
-   accordeonRowBodies[i].style.maxHeight=accordeonRowBodies[i].getElementsByClassName("clampedcontent")[0]
-.scrollHeight + "px";
-   }; 
- }
-}
-</script>

source/css/atoms/collapsibles.pcss

@@ -2,7 +2,8 @@
 	@apply bg-grey-125;
 }
 
-.accordeon-row.accordeon-row--preview.accordeon-row--open{
+.accordeon-row.accordeon-row--preview.accordeon-row--open,
+.accordeon-row.accordeon-row--fadeout.accordeon-row--open{
 	@apply bg-black;
 }
 .accordeon-row-head{
@@ -16,7 +17,8 @@
 		@apply absolute top-1/2 right-8 transform -translate-y-2/4 transition transition-transform duration-500;
 	}
 }
-.accordeon-row--preview .accordeon-row-head{
+.accordeon-row--preview .accordeon-row-head,
+.accordeon-row--fadeout .accordeon-row-head{
 	@apply pb-4;
 	i{
 		@apply translate-y-0;
@@ -41,6 +43,13 @@
 		}
 	}
 }
+.accordeon-row.accordeon-row--fadeout{
+	.accordeon-row-body{
+		&>div{	
+		  	@apply py-0;
+		}
+	}
+}
 
 .accordeon-row--open{
 	@apply bg-black text-white;
@@ -51,7 +60,7 @@
 		max-height: 2000px; /*  max-height set by js, css fallback to high number */
 	}
 }
-.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview){
+.accordeon-row:not(.accordeon-row--open):not(.accordeon-row--preview):not(.accordeon-row--fadeout){
 	.accordeon-row-body{
 		max-height: 0px!important
 	}
@@ -61,6 +70,38 @@
 		max-height: 80px!important;
 	}
 }
+
+.accordeon-row.accordeon-row--fadeout.accordeon-row--open{
+	.btn{
+		@apply hidden;
+	}
+	.accordeon-row-body{
+		height: auto!important;
+
+		div{
+			@apply pb-8;		
+		}
+	}
+}
+.accordeon-row.accordeon-row--fadeout:not(.accordeon-row--open){
+	@apply relative;
+
+	.accordeon-row-body{
+		max-height: 220px!important;
+		@apply overflow-hidden;
+		
+		&::after {
+		    content: "";
+		    background-image: linear-gradient(to top, #fff 4rem, rgba(255, 255, 255, 0) 220px);
+		    @apply absolute bottom-0 left-0 w-full;
+		    height: inherit;
+		}
+	}
+	.btn{
+		@apply block;
+	}
+
+}
 .container-collapsible{
 	/*can be applied to even higher parents. Hides floating nav if inside it */
 	&:not(.container-collapsible-open){
@@ -68,7 +109,7 @@
 			@apply overflow-hidden;
 			&::after {
 			    content: "";
-			    background-image: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 20rem);
+			    background-image: linear-gradient(to top, #fff 4.5rem, rgba(255, 255, 255, 0) 20rem);
 			    @apply absolute bottom-0 left-0 w-full;
 			    height: inherit;
 			}