Standardization of the accordion element

_data/internal/credits/care.yml

@@ -9,4 +9,4 @@ provider-link: https://thenounproject.com/
 image-url: /assets/images/join-us/help-us-icon.svg
 alt: 'Image of Care'
 type: icon
---- 
+---

_guide-pages/2FA.html

@@ -102,23 +102,4 @@ <h3>Member Analytics</h3>
         </div>
     </div>
 </div>
--->
-
-<!-- //script for FAQ dropdown -->
-<script>
-    let showAnswer = document.getElementsByClassName('accordion');
-
-    for (let i = 0; i < showAnswer.length; i++) {
-        showAnswer[i].addEventListener("click", function () {
-
-            this.classList.toggle("active");
-            let panel = this.nextElementSibling;
-            if (panel.style.display === "block") {
-                panel.style.display = "none"
-            } else {
-                panel.style.display = "block"
-            }
-        })
-
-    }
-</script>
+<script src ="/assets/js/elements/accordion.js"></script>

_sass/components/_getting-started-page.scss

@@ -363,70 +363,6 @@
   margin: 30px auto;
 }
 
-.github-sign-up-text {
-  font-size: 13px;
-  padding-top: 10px;
-}
-
-.getting-started-step-title-faq {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-left: 2px;
-
-  @media #{$bp-below-mobile} {
-    font-size: 1.25rem;
-    text-align: center;
-    font-weight: bold;
-  }
-}
-
-.accordion {
-  color: black;
-  cursor: pointer;
-  transition: 0.4s;
-  font-size: 1.25rem;
-  text-align: left;
-  border-bottom: 0.5px solid gray;
-  margin-top: 45px;
-
-  @media #{$bp-below-mobile} {
-    margin-top: 20px;
-    min-width: 255px;
-    font-size: 1.125rem;
-  }
-}
-
-.getting-started-guide-content-section p {
-  padding-bottom: 1.2rem;
-}
-
-.accordion:after {
-  content: "\221F";
-  float: right;
-  transform: rotate(-45deg);
-  transition: transform 0.25s ease-in;
-  font-weight: bolder;
-  font-size: 20px;
-  margin-top: -.1em;
-  color: rgb(250, 17, 79);
-
-  @media #{$bp-below-mobile} {
-    color: rgb(250, 17, 79);
-  }
-}
-
-.active::after {
-  content: "\221F";
-  transform: rotate(135deg);
-  transition: transform 0.25s ease-in;
-}
-
-.panel {
-  display: none;
-  text-align: left;
-  margin-top: 40px;
-}
-
 .ordered-list-steps {
   display: flex;
   flex-direction: row;

_sass/components/guide-pages/2FA.scss

@@ -1,7 +1,3 @@
-.accordion {
-    padding: 0.2rem;
-
-}
 
 #myCanvas {
     justify-content: center;
@@ -80,10 +76,6 @@
 }
 
 @media #{$bp-below-desktop} {
-    .accordion {
-        min-width: 150px;
-    }
-
     .screenshot-2FA img {
         min-width: 200px;
         width: 100%;

_sass/elements/_accordion.scss

@@ -0,0 +1,63 @@
+.accordion {
+    color: black;
+    cursor: pointer;
+    transition: 0.4s;
+    font-size: 1.25rem;
+    text-align: left;
+    border-bottom: 0.5px solid gray;
+    max-width: 1000px;
+    margin-top: 45px;
+
+    @media #{$bp-below-mobile} {
+      margin-top: 20px;
+      min-width: 255px;
+      font-size: 1.125rem;
+    }
+  }
+
+
+  .svg-accordion {
+    float: right;
+  }
+
+  .svg-accordion:hover {
+    opacity: 0.5;
+  }
+
+  .accordion:after {
+    content: "\221F";
+    float: right;
+    transform: rotate(-45deg);
+    transition: transform 0.25s ease-in;
+    color: $color-red;
+    font-weight: bolder;
+    font-size: 24px;
+  }
+
+  .accordion {
+    padding: 0.2rem;
+
+}
+
+.active::after {
+  content: "\221F";
+  transform: rotate(135deg);
+  transition: transform 0.25s ease-in;
+}
+
+.panel {
+  display: none;
+  overflow: hidden;
+  text-align: left;
+  margin-top: 40px;
+}
+
+.show {
+  display: block;
+}
+
+@media #{$bp-below-desktop} {
+    .accordion {
+        min-width: 150px;
+    }
+}

_sass/main.scss

@@ -22,6 +22,7 @@
 // /**
 //  * Elements
 //  */
+@import 'elements/accordion';
 @import 'elements/buttons';
 @import 'elements/forms';
 @import 'elements/icons';

assets/js/elements/accordion.js

@@ -0,0 +1,12 @@
+
+    var showAnswer = document.getElementsByClassName('accordion');
+
+    for (var i = 0; i < showAnswer.length; i++) {
+        showAnswer[i].addEventListener("click", function () {
+
+            this.classList.toggle("active");
+            var panel = this.nextElementSibling;
+           panel.classList.toggle("show");
+        })
+
+    }

pages/getting-started.html

@@ -281,23 +281,4 @@ <h1 class="header-h1">Getting Started</h1>
         </div>
     </div>
 </div>
-
-<!-- //script for FAQ dropdown -->
-
-<script>
-    var showAnswer = document.getElementsByClassName('accordion');
-
-    for (var i = 0; i < showAnswer.length; i++) {
-        showAnswer[i].addEventListener("click", function () {
-
-            this.classList.toggle("active");
-            var panel = this.nextElementSibling;
-            if (panel.style.display === "block") {
-                panel.style.display = "none"
-            } else {
-                panel.style.display = "block"
-            }
-        })
-
-    }
-</script>
+<script src="/assets/js/elements/accordion.js"></script>