Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature] Add Real-Time Search Functionality for FAQs #1632

Merged
merged 1 commit into from
Oct 19, 2024
+107 −16
Merged

[Feature] Add Real-Time Search Functionality for FAQs #1632

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 107 additions & 16 deletions faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down