Accordian added

src/App.js

@@ -8,6 +8,7 @@ import SelectDemo from "./demos/SelectDemo";
 import ModalsDemo from "./demos/ModalsDemo";
 import ButtonsDemo from "./demos/ButtonsDemo";
 import SkeletonDemo from "./demos/SkeletonDemo";
+import Accordion from "./demos/AccordionDemo";
 
 export default function App() {
   return (
@@ -48,6 +49,8 @@ export default function App() {
       <ToastDemo />
       {/* Skeletons */}
       <SkeletonDemo />
+      {/* Accordion */}
+      <Accordion />
     </div>
   );
 }

src/components/Accordion/Accordion.js

@@ -0,0 +1,36 @@
+import React from "react";
+import "./Accordion.scss";
+
+const AccordianValues =
+    [
+        {
+            "title": "Expandable Item 1",
+            "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quisquam cum doloremque esse iste expedita."
+        },
+        {
+            "title": "Expandable Item 2",
+            "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quisquam cum doloremque esse iste expedita."
+        },
+        {
+            "title": "Expandable Item 3",
+            "desc": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quisquam cum doloremque esse iste expedita."
+        }
+    ]
+
+const Accordion = () => {
+    return (
+        <div>
+            {
+                AccordianValues.map((value, index) => (
+                    <section key={index}>
+                        <input type="checkbox" id={`item-${index+1}`} className="accordion" />
+                        <label for={`item-${index+1}`}>{value.title}</label>
+                        <article>{value.desc}</article>
+                    </section>
+                ))
+            }
+        </div>
+    )
+}
+
+export default Accordion

src/components/Accordion/Accordion.scss

@@ -0,0 +1,66 @@
+$accent-color: #45ADA8;
+$text-padding: 25px;
+
+input.accordion {
+    // Hide checkbox
+    appearance: none;
+    left: -100%;
+    position: absolute;
+    top: -100%;
+
+    // Style the label text
+    & + label {
+        cursor: pointer;
+        font-size: 20px;
+        font-weight: bold;
+        padding-left: $text-padding;
+
+        // Add the '+' sign
+        span::before { 
+            color: $accent-color;
+            content: '\002B';
+            position: absolute;
+            left: 0px;
+        }
+    }
+
+    // Hide the article if the checkbox is unchecked
+    & ~ article {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        padding: 5px;
+        padding-left: $text-padding;
+        transition: height 500ms ease,
+                opacity 500ms ease;
+    }
+
+    &:checked {
+        // Add the 'x' sign to each expanded dropdown item
+        & + label span::before { content: '\00D7'; }
+
+        // Show the article if the checkbox is checked
+        & ~ article {
+            height: 100%;
+            opacity: 1;
+        }
+    }
+}
+
+// Main content styling
+main {
+    height: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+h1 { font-size: 30px; }
+
+section {
+    border-bottom: 1px solid $accent-color;
+    padding-top: 30px;
+    position: relative;
+
+  &:first-of-type { padding-top: 0; }
+}

src/demos/AccordionDemo.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Accordian from "../components/Accordion/Accordion";
+
+export default function AccordionDemo() {
+    return (
+        <div className="App__Section">
+            <p className="App__Section--title">Accordian</p>
+            <Accordian />
+        </div>
+    )
+}