make case studies expandable

static/js/expandable.js

@@ -0,0 +1,10 @@
+document.getElementById( 'case_studies-slide-more' ).addEventListener( 'click', function() {
+  var body = document.getElementById( 'case_studies-slide-body' );
+  if( body.className == 'expanded' ) {
+      body.className = 'contracted';
+      document.getElementById( 'case_studies-slide-more' ).textContent = 'Expand';
+  } else {
+      body.className = 'expanded';
+      document.getElementById( 'case_studies-slide-more' ).textContent = 'Compress';
+  };
+} );

themes/coopcloud.tech/assets/scss/main.scss

@@ -272,4 +272,28 @@ footer .separator {
     .post-metadata {
         text-transform: uppercase;
     }
+}
+
+// Styling for the exapndable divs
+
+
+#case_studies-slide-body{
+    max-height: 1000px;
+    overflow: hidden;
+    transition:         max-height 500ms ease;
+    -moz-transition:    max-height 500ms ease;
+    -ms-transition:     max-height 500ms ease;
+    -o-transition:      max-height 500ms ease;
+    -webkit-transition: max-height 500ms ease;
+}
+.expanded {
+    height: auto !important;
+    max-height: 3000px !important;
+}
+.contracted {
+    background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 0) 80%, rgba(239, 239, 239, 0.25) 90%, rgba(239, 239, 239, 1)) !important;
+}
+#case_studies-slide-more {    
+    cursor: pointer;
+    text-align: right;
 }

themes/coopcloud.tech/layouts/partials/index/case_studies.html

@@ -2,6 +2,7 @@
   <div class="container content">
     <h1 class="is-uppercase">Who’s  already using co-op cloud?</h1>
 
+    <div id="case_studies-slide-body">
     {{ range $index, $item := .data }}
     <div class="columns is-centered my-6 is-vcentered">
       {{ if eq (mod $index 2) 0 }}
@@ -35,5 +36,8 @@
       {{ end }}
     </div>
     {{ end }}
+    </div>
+    <div id="case_studies-slide-more" class="button">Expand</div>
   </div>
+  <script defer language="javascript" type="text/javascript"  src="{{ "/js/expandable.js" | urlize | relURL }}"></script>
 </section>