Building the collapsible component.

Author: skak11

components/collapsible.html

@@ -0,0 +1,12 @@
+<div class="collapsible collapsible--expanded">
+  <header class="collapsible__header">
+    <h2 class="collapsible__heading">Item 1</h2>
+    <svg class="icon icon--primary collapsible__chevron">
+      <use xlink:href="images/sprite.svg#chevron"></use>
+    </svg>
+  </header>
+  <div class="collapsible__content">
+    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quos.
+  </div>
+</div>
+<script src="js/main.js"></script>

css/style.css

@@ -549,4 +549,36 @@ a {
         margin: 0 2rem;
     }
 
+}
+
+/*Collapsibles*/
+.collapsible__header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.collapsible__heading {
+    margin-top: 0;
+    font-size: 3rem;
+}
+
+.collapsible__chevron {
+    transform: rotate(-90deg);
+    transition: transform 0.3s;
+}
+
+.collapsible__content {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all 0.3s;
+}
+
+.collapsible--expanded .collapsible__chevron {
+    transform: rotate(0);
+}
+
+.collapsible--expanded .collapsible__content {
+    max-height: 100vh;
+    opacity: 1;
 }

index.html

@@ -105,7 +105,7 @@ <h3 class="media_title quote__author">John Lumeo</h3>
     <div class="card testimonial">
       <div class="grid grid--1x2">
         <div class="testimonial__image">
-          <img src="images/testimonial.jpg" alt="A happy, smiling customer" />
+          <img src="images/" alt="A happy, smiling customer" />
           <span class="icon-container icon-container--accent">
             <svg class="icon icon--white icon--small">
               <use xlink:href="images/sprite.svg#quotes"></use>
@@ -150,5 +150,17 @@ <h2 class="callout__heading">Ready to Get Started</h2>
         >
       </div>
     </div>
+    <div class="collapsible collapsible--expanded">
+      <header class="collapsible__header">
+        <h2 class="collapsible__heading">Item 1</h2>
+        <svg class="icon icon--primary collapsible__chevron">
+          <use xlink:href="images/sprite.svg#chevron"></use>
+        </svg>
+      </header>
+      <div class="collapsible__content">
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, quos.
+      </div>
+    </div>
+    <script src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -0,0 +1,6 @@
+const collapsibles = document.querySelectorAll(".collapsible");
+collapsibles.forEach((item) =>
+  item.addEventListener("click", function () {
+    this.classList.toggle("collapsible--expanded");
+  })
+);