FAQ Section Glitches Fixed (#889)

index.html

@@ -393,15 +393,14 @@
       margin-bottom: 15px;
       width: 100%;
       /* Full width by default */
-      background-color: #000000;
+      /* background-color: #000000; */
       border: 1px solid #ccc;
       border-radius: 10px;
       overflow: hidden;
       transition: background-color 0.3s ease;
+      transition: all 0.3s ease;
     }
-    .faq:hover {
-      background-color: #e31616; /* Slight hover effect for FAQs */
-    }
+
     .faq-question {
       background-color: #e7ffe7;
       color: #333;
@@ -774,8 +773,6 @@ <h2>Contact Us</h2>
         <div class="faq-answer">
           <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
             possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
-          <p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
-            possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
         </div>
       </div>
 
@@ -784,26 +781,20 @@ <h2>Contact Us</h2>
       <div class="faq-answer">
         <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
           live map feature.</p>
-        <p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
-          live map feature.</p>
       </div>
     </div>
     <div class="faq">
       <button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
       <div class="faq-answer">
         <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
           please contact emergency services for further instructions.</p>
-        <p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
-          please contact emergency services for further instructions.</p>
       </div>
     </div>
     <div class="faq">
       <button class="faq-question">Can I provide medical information for the patient in advance?</button>
       <div class="faq-answer">
         <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
           the situation.</p>
-        <p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
-          the situation.</p>
       </div>
     </div>
     <div class="faq">
@@ -826,15 +817,12 @@ <h2>Contact Us</h2>
       <div class="faq-answer">
         <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
           technical issue through the system or contact support.</p>
-        <p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
-          technical issue through the system or contact support.</p>
       </div>
     </div>
     <div class="faq">
       <button class="faq-question">Can I schedule an ambulance in advance?</button>
       <div class="faq-answer">
         <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
-        <p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
       </div>
     </div>
     <div class="faq">
@@ -1021,20 +1009,27 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
         button.addEventListener('click', function () {
           const faq = button.parentElement;
           const answer = faq.querySelector('.faq-answer');
-
-          // Toggle active class
+
+          // Collapse all other answers
+          document.querySelectorAll('.faq').forEach(item => {
+            if (item !== faq) {
+              item.classList.remove('active');
+              item.querySelector('.faq-answer').style.maxHeight = '0';
+            }
+          });
+
+          // Toggle active class for clicked FAQ
           faq.classList.toggle('active');
-
-          // Control the max-height for slide effect
           if (faq.classList.contains('active')) {
-            answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
+            answer.style.maxHeight = answer.scrollHeight + 'px';
           } else {
-            answer.style.maxHeight = '0'; // Set height to zero to collapse
+            answer.style.maxHeight = '0';
           }
         });
       });
     });
 
+
     //enabling the Dark mode toggle button added
     document.addEventListener("DOMContentLoaded", () => {
       const darkModeButton = document.getElementById("dark-mode-button");