Added search functionality for FAQ

PrityanshuSingh · Oct 19, 2024 · 3e4ad50 · 3e4ad50
1 parent d880843
commit 3e4ad50
Showing 1 changed file with 107 additions and 16 deletions.
diff --git a/faq.html b/faq.html
@@ -414,77 +414,168 @@ <h1 class="faq-title">Frequently Asked Questions</h1>
 
     <!-- Search Bar -->
     <div class="faq-search">
-        <input type="text" class="faq-search-input" placeholder="Type your question..." aria-label="Search FAQ">
-        <button class="faq-search-btn">Search</button>
+      <input
+        type="text"
+        class="faq-search-input"
+        placeholder="Type your question..."
+        aria-label="Search FAQ"
+        oninput="filterFAQs()"
+      />
+      <button class="faq-search-btn" onclick="filterFAQs()">Search</button>
     </div>
 
     <div class="accordion" id="faqAccordion">
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingOne">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapseOne"
+            aria-expanded="false"
+            aria-controls="collapseOne"
+          >
             What is Finveda?
           </button>
         </h2>
-        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
+        <div
+          id="collapseOne"
+          class="accordion-collapse collapse"
+          aria-labelledby="headingOne"
+          data-bs-parent="#faqAccordion"
+        >
           <div class="accordion-body">
-            Finveda is a dynamic financial literacy app with Arthsathi AI chatbot, finance blogs, market trends, SIP calculator, and a quiz for effortless finance learning.
+            Finveda is a dynamic financial literacy app with Arthsathi AI chatbot,
+            finance blogs, market trends, SIP calculator, and a quiz for effortless
+            finance learning.
           </div>
         </div>
       </div>
 
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingTwo">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapseTwo"
+            aria-expanded="false"
+            aria-controls="collapseTwo"
+          >
             What problem does Finveda solve?
           </button>
         </h2>
-        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
+        <div
+          id="collapseTwo"
+          class="accordion-collapse collapse"
+          aria-labelledby="headingTwo"
+          data-bs-parent="#faqAccordion"
+        >
           <div class="accordion-body">
-            Finveda aims to solve the lack of financial literacy in India, providing tools and resources to improve financial knowledge for individuals.
+            Finveda aims to solve the lack of financial literacy in India, providing
+            tools and resources to improve financial knowledge for individuals.
           </div>
         </div>
       </div>
 
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingThree">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapseThree"
+            aria-expanded="false"
+            aria-controls="collapseThree"
+          >
             What services does Finveda offer?
           </button>
         </h2>
-        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
+        <div
+          id="collapseThree"
+          class="accordion-collapse collapse"
+          aria-labelledby="headingThree"
+          data-bs-parent="#faqAccordion"
+        >
           <div class="accordion-body">
-            Finveda offers expert-written blogs, market trends, SIP and PPF calculators, and more for personalized finance education. 
+            Finveda offers expert-written blogs, market trends, SIP and PPF
+            calculators, and more for personalized finance education.
           </div>
         </div>
       </div>
 
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingFour">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapseFour"
+            aria-expanded="false"
+            aria-controls="collapseFour"
+          >
             How can I start using Finveda?
           </button>
         </h2>
-        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
+        <div
+          id="collapseFour"
+          class="accordion-collapse collapse"
+          aria-labelledby="headingFour"
+          data-bs-parent="#faqAccordion"
+        >
           <div class="accordion-body">
-            Simply sign up and access all our features, including personalized financial education and tools.
+            Simply sign up and access all our features, including personalized
+            financial education and tools.
           </div>
         </div>
       </div>
 
       <div class="accordion-item">
         <h2 class="accordion-header" id="headingFive">
-          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
+          <button
+            class="accordion-button collapsed"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#collapseFive"
+            aria-expanded="false"
+            aria-controls="collapseFive"
+          >
             Is Finveda free to use?
           </button>
         </h2>
-        <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#faqAccordion">
+        <div
+          id="collapseFive"
+          class="accordion-collapse collapse"
+          aria-labelledby="headingFive"
+          data-bs-parent="#faqAccordion"
+        >
           <div class="accordion-body">
             Yes, Finveda is completely free to use for all users.
           </div>
         </div>
       </div>
     </div>
 
+    <!-- JavaScript to filter FAQs -->
+    <script>
+      function filterFAQs() {
+        const searchInput = document.querySelector('.faq-search-input').value.toLowerCase();
+        const accordionItems = document.querySelectorAll('.accordion-item');
+
+        accordionItems.forEach(item => {
+          const headerText = item.querySelector('.accordion-button').textContent.toLowerCase();
+          const bodyText = item.querySelector('.accordion-body').textContent.toLowerCase();
+
+          if (headerText.includes(searchInput) || bodyText.includes(searchInput)) {
+            item.style.display = 'block';
+          } else {
+            item.style.display = 'none';
+          }
+        });
+      }
+    </script>
+
+
     <!-- Feedback Section -->
     <<div class="faq-section">
       <!-- Feedback Section -->