diff --git a/_data/internal/credits/care.yml b/_data/internal/credits/care.yml
index b65b105ddc..c505eee318 100644
--- a/_data/internal/credits/care.yml
+++ b/_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
----
\ No newline at end of file
+---
\ No newline at end of file
diff --git a/_guide-pages/2FA.html b/_guide-pages/2FA.html
index 363b10c257..2e0830728f 100644
--- a/_guide-pages/2FA.html
+++ b/_guide-pages/2FA.html
@@ -102,23 +102,4 @@
Member Analytics
--->
-
-
-
\ No newline at end of file
+
diff --git a/_sass/components/_getting-started-page.scss b/_sass/components/_getting-started-page.scss
index 5b9dc99472..2530a5e9cf 100644
--- a/_sass/components/_getting-started-page.scss
+++ b/_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;
diff --git a/_sass/components/guide-pages/2FA.scss b/_sass/components/guide-pages/2FA.scss
index 9c950fd738..6f891b07b1 100644
--- a/_sass/components/guide-pages/2FA.scss
+++ b/_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%;
diff --git a/_sass/elements/_accordion.scss b/_sass/elements/_accordion.scss
new file mode 100644
index 0000000000..3f245ee4b0
--- /dev/null
+++ b/_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;
+ }
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index 2a01eaa61e..1dbd984e7b 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -22,6 +22,7 @@
// /**
// * Elements
// */
+@import 'elements/accordion';
@import 'elements/buttons';
@import 'elements/forms';
@import 'elements/icons';
diff --git a/assets/js/elements/accordion.js b/assets/js/elements/accordion.js
new file mode 100644
index 0000000000..5aed7932b6
--- /dev/null
+++ b/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");
+ })
+
+ }
diff --git a/pages/getting-started.html b/pages/getting-started.html
index b1ea109660..e33f677dcd 100644
--- a/pages/getting-started.html
+++ b/pages/getting-started.html
@@ -281,23 +281,4 @@
-
-
-
-
\ No newline at end of file
+