Jobs are now collapsible in about

RenegadeGirls · Nov 27, 2023 · 06aef84 · 06aef84
1 parent 8541cc0
commit 06aef84
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/about/index.html b/about/index.html
@@ -194,6 +194,9 @@ <h6>Skills</h6>
         </div>
     </div>
     <div data-href="../global/tiles/footer.html"></div>
+
+    <!-- Main Script -->
+    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/about/script.js b/about/script.js
@@ -0,0 +1,12 @@
+const collapsibles = [...document.getElementsByClassName("type")];
+collapsibles.forEach(el => {
+    toggleCollapsible(el);
+    el.children[0].addEventListener("click", () => toggleCollapsible(el));
+});
+
+function toggleCollapsible(e) {
+    const children = [...e.children];
+    children.shift();
+
+    children.forEach(c => c.classList.toggle("collapsed"));
+}
diff --git a/about/style.css b/about/style.css
@@ -65,12 +65,22 @@
     max-width: 900px;
 }
 
+.type {
+    background-color: var(--l);
+    padding: 1em 2em;
+    border-radius: 5px;
+    margin: 1em 0px;
+}
+
+.type {
+    transition: height 1s linear;
+}
 
 .type > h4 {
     font-family: "Poppins";
     font-size: 1.8em;
     font-weight: 400;
-    margin-bottom: 0px;
+    margin: 0px;
 }
 
 .type > p {
@@ -79,6 +89,10 @@
     margin-bottom: 2em;
 }
 
+.type > .collapsed {
+    display: none;
+}
+
 .list {
     font-family: "Nunito";
     margin-bottom: 2em;