faq collapse project

ST1LLWATER · Oct 7, 2022 · a22a2a5 · a22a2a5
1 parent 33854b0
commit a22a2a5
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 0 deletions.
diff --git a/Js-Projects/FAQ Collapse/index.html b/Js-Projects/FAQ Collapse/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>FAQ Collapse</title>
+   <link type="text/css" href="style.css" rel="stylesheet">
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+   <h1>Frequently Asked Questions</h1>
+   <div class="faq-container">
+      <div class="faq">
+         <h3 class="faq-tittle">
+            Why shouldn't we trust atoms?
+         </h3>
+         <p class="faq-text">
+            They make up eveything.
+         </p>
+         <button class="faq-toggle">
+            <i class="fa-solid fa-chevron-down"></i>
+            <i class="fa-solid fa-xmark"></i>
+         </button>
+      </div>
+
+      <div class="faq">
+         <h3 class="faq-tittle">
+            What is 1+1?
+         </h3>
+         <p class="faq-text">
+            Depends on who are you asking.
+         </p>
+         <button class="faq-toggle">
+            <i class="fa-solid fa-chevron-down"></i>
+            <i class="fa-solid fa-xmark"></i>
+         </button>
+      </div>
+
+      <div class="faq">
+         <h3 class="faq-tittle">
+            What do you call someone with no body and no nose?
+         </h3>
+         <p class="faq-text">
+            Nobody knows
+         </p>
+         <button class="faq-toggle">
+            <i class="fa-solid fa-chevron-down"></i>
+            <i class="fa-solid fa-xmark"></i>
+         </button>
+      </div>
+
+      <div class="faq">
+         <h3 class="faq-tittle">
+            What's the object oriented way to become health?
+         </h3>
+         <p class="faq-text">
+            Inheritance.
+         </p>
+         <button class="faq-toggle">
+            <i class="fa-solid fa-chevron-down"></i>
+            <i class="fa-solid fa-xmark"></i>
+         </button>
+      </div>
+   </div>
+   <script src="script.js"></script>
+   <script src="https://kit.fontawesome.com/50bb249a60.js" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/Js-Projects/FAQ Collapse/script.js b/Js-Projects/FAQ Collapse/script.js
@@ -0,0 +1,7 @@
+const toggles= document.querySelectorAll('.faq-toggle');
+
+toggles.forEach(toggle => {
+   toggle.addEventListener('click',() =>{
+      toggle.parentNode.classList.toggle('active');
+   })
+})
diff --git a/Js-Projects/FAQ Collapse/style.css b/Js-Projects/FAQ Collapse/style.css
@@ -0,0 +1,110 @@
+*{
+   box-sizing: border-box;
+}
+
+body{
+   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+   /* display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   height: 100vh;
+   overflow: hidden;
+   margin: 0; */
+   background-color: #f0f0f0;
+}
+
+h1{
+   margin: 50px 0 30px;
+   text-align: center;
+}
+
+.faq-container{
+   max-width: 600px;
+   margin: 0 auto;
+}
+
+.faq{
+   background-color: transparent;
+   border: 1px solid rgb(161, 156, 156);
+   border-radius: 10px;
+   margin: 20px 0;
+   padding: 30px;
+   position: relative;
+   overflow: hidden;
+   transition: 0.3s ease;
+}
+
+.faq.active{
+   background-color: white;
+   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.faq.faq.active::before, .faq.faq.active::after{
+   content: '\f075';
+   font-family: 'Font Awesome 5 Free';
+   color: #2ecc71;
+   font-size: 7rem;
+   position: absolute;
+   opacity: 0.2;
+   top: 20px;
+   left: 20px;
+   z-index: 0;
+}
+
+.faq.faq.active::before{
+   color: #3498db;
+   top: -10px;
+   left: -30px;
+   transform: rotateY(180deg);
+}
+
+.faq-tittle{
+   margin: 0 35px 0 0;
+}
+
+.faq-text{
+   margin: 30px 0 0;
+   display: none;
+}
+
+.faq.active .faq-text{
+   display: block;
+}
+
+.faq-toggle{
+   background-color: transparent;
+   border: 0;
+   cursor: pointer;
+   align-items: center;
+   justify-content: center;
+   font-size: 16px;
+   padding: 0;
+   position: absolute;
+   top: 30px;
+   height: 30px;
+   right: 30px;
+   width: 30px;
+   border-radius: 50%;
+}
+
+.faq-toggle:focus{
+   outline: 0;
+}
+
+.faq-toggle .fa-xmark {
+   display: none;
+}
+
+.faq.active .faq-toggle .fa-xmark {
+   color: white;
+   display: block;
+}
+
+.faq.active .faq-toggle .fa-chevron-down {
+   display: none;
+}
+
+.faq.active .faq-toggle {
+   background-color: #9fa4a8;
+}