final production based code.

thinkswell · Oct 26, 2023 · ef0567a · ef0567a
1 parent d856001
commit ef0567a
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 20 deletions.
diff --git a/FAQ_page/Devanshukoli/Index.html b/FAQ_page/Devanshukoli/Index.html
@@ -5,9 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FAQ Page</title>
     <link rel="stylesheet" href="./style.css" />
-    <style>
-
-    </style>
+    <style></style>
   </head>
   <body>
     <section>
@@ -16,13 +14,38 @@ <h2 class="title">FAQ</h2>
       <div class="faq">
         <div class="question">
           <h3>Is your website is secure?</h3>
+          <svg width="15" height="10" viewBox="0 0 42 25">
+            <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round"/>
+          </svg>
+        </div>
+
+        <div class="answer">
+          <p>Yes, it is :)</p>
+        </div>
+      </div>
+
+      <div class="faq">
+        <div class="question">
+          <h3>Do you charge Deals?</h3>
           <svg width="15" height="10" viewBox="0 0 42 25">
             <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round" />
           </svg>
         </div>
 
         <div class="answer">
-            <p>Yes, it is :)</p>
+          <p>NO, We don't ;(</p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>What about price?</h3>
+          <svg width="15" height="10" viewBox="0 0 42 25">
+            <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round"/>
+          </svg>
+        </div>
+
+        <div class="answer">
+          <p>navigate through price page.</p>
         </div>
       </div>
     </section>

diff --git a/FAQ_page/Devanshukoli/app.js b/FAQ_page/Devanshukoli/app.js
@@ -1 +1,7 @@
-console.log('hello world')
+const faqs = document.querySelectorAll('.faq')
+
+faqs.forEach(faq => {
+    faq.addEventListener('click', () => {
+        faq.classList.toggle('active')
+    })
+})
diff --git a/FAQ_page/Devanshukoli/style.css b/FAQ_page/Devanshukoli/style.css
@@ -22,30 +22,60 @@ section {
 }
 
 .title {
-        font-size: 3rem;
-        margin: 2rem 0rem;
-      }
+    font-size: 3rem;
+    margin: 2rem 0rem;
+}
 
 .faq {
-max-width: 700px;
-margin-top: 2rem;
-padding-bottom: 1rem;
-border-bottom: 2px solid #ccc;
-cursor: pointer;
+    max-width: 700px;
+    margin-top: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #ccc;
+    cursor: pointer;
 }
 
 .question {
-display: flex;
-justify-content: space-between;
-align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .question h3 {
-font-size: 1.8rem;
+    font-size: 1.8rem;
+}
+
+.answer {
+    max-height: 0;
+    overflow: hidden; 
+    transition: max-height 1.4s ease;
 }
 
 .answer p {
-padding-top: 1rem;
-line-height: 1.6;
-font-size: 1.4rem;
+    padding-top: 1rem;
+    line-height: 1.6;
+    font-size: 1.4rem;
+}
+
+.faq.active .answer {
+    max-height: 300px;
+    animation : fade 1s ease-in-out;
+}
+
+.faq.active svg {
+    transform: rotate(180deg)
+}
+
+svg {
+    transition: transform 0.5s ease-in;
+}
+
+@keyframes fade {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0px)
+    }
 }