Enhanced FAQs

Author: imranah10

Projects/Education Website/css/style.css

@@ -280,6 +280,7 @@ header {
 /* ========================================== FAQs ========================================== */
 
 .faqs {
+   
     background: var(--color-bg1);
     box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
 }
@@ -295,7 +296,7 @@ header {
     display: flex;
     align-items: center;
     gap: 1.4rem;
-    height: fit-content;
+    height:100px;
     background: var(--color-primary);
     cursor: pointer;
 }
@@ -320,6 +321,10 @@ header {
 }
 
 
+.faqheight{
+    height: fit-content;
+}
+
 /* ========================================== TESTIMONIALS ========================================== */
 
 .testimonials__container {

Projects/Education Website/main.js

@@ -8,11 +8,13 @@ window.addEventListener('scroll', () => {
 
 // show/hide faq answer
 
+
 const faqs = document.querySelectorAll(".faq");
 
 faqs.forEach(faq => {
     faq.addEventListener("click", () => {
         faq.classList.toggle("open");
+        faq.classList.toggle('faqheight')
 
         // change icon
         const icon = faq.querySelector(".faq__icon i");