Home
Dpk Mht
FAQ with Search

FAQ with Search

This tailwind example is contributed by Dpk Mht, on 21-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Dpk Mht

Fork Fullscreen

<div class="p-8 bg-white rounded shadow">
    <div class="flex flex-col sm:flex-row justify-between items-center mb-6">
        <h1 class="text-3xl font-bold mb-4 sm:mb-0">Frequently Asked Questions</h1>
        <input type="text" id="searchInput" onkeyup="filterFAQs()" placeholder="Search FAQs" class="w-full sm:w-1/3 p-2 mb-4 sm:mb-0 border rounded" />
    </div>
    <ul id="faqList">
        <li class="mb-4">
            <button class="w-full text-left p-4 bg-gray-100 rounded-t shadow hover:bg-gray-200" onclick="toggleFAQ(this)">
                1. <span class="question">Why is a building called a 'building' if it's already built?</span>
            </button>
            <div class="p-4 bg-white border rounded-b shadow-inner hidden">
                <div class="answer">Great question! It's called a building because language is strange and full of mysteries. Much like the chicken or the egg dilemma, this one might keep you up at night!</div>
            </div>
        </li>
        <li class="mb-4">
            <button class="w-full text-left p-4 bg-gray-100 rounded-t shadow hover:bg-gray-200" onclick="toggleFAQ(this)">
                2. <span class="question">If a word is misspelled in the dictionary, how would we ever know?</span>
            </button>
            <div class="p-4 bg-white border rounded-b shadow-inner hidden">
                <div class="answer">That's a conundrum! We'd probably just keep spelling it wrong until someone smarter than us noticed.</div>
            </div>
        </li>
        <li class="mb-4">
            <button class="w-full text-left p-4 bg-gray-100 rounded-t shadow hover:bg-gray-200" onclick="toggleFAQ(this)">
                3. <span class="question">Why do we press harder on the remote control buttons when we know the batteries are dead?</span>
            </button>
            <div class="p-4 bg-white border rounded-b shadow-inner hidden">
                <div class="answer">It's the universal sign of hope and frustration combined. Also, we secretly believe that our sheer willpower can charge batteries.</div>
            </div>
        </li>
        <li class="mb-4">
            <button class="w-full text-left p-4 bg-gray-100 rounded-t shadow hover:bg-gray-200" onclick="toggleFAQ(this)">
                4. <span class="question">Can a kangaroo jump higher than a house?</span>
            </button>
            <div class="p-4 bg-white border rounded-b shadow-inner hidden">
                <div class="answer">Absolutely! Houses can't jump, but kangaroos can jump really high. So, kangaroos win this one by default.</div>
            </div>
        </li>
        <li class="mb-4">
            <button class="w-full text-left p-4 bg-gray-100 rounded-t shadow hover:bg-gray-200" onclick="toggleFAQ(this)">
                5. <span class="question">Why do we call it 'after dark' when it's really 'after light'?</span>
            </button>
            <div class="p-4 bg-white border rounded-b shadow-inner hidden">
                <div class="answer">Because humans like to make things confusing. It's a tradition!</div>
            </div>
        </li>
    </ul>
</div>

faqs.forEach(faq => {
            const questionElement = faq.querySelector('.question');
            const answerElement = faq.querySelector('.answer');
            const question = questionElement.textContent.toLowerCase();
            const answer = answerElement.textContent.toLowerCase();

if (question.includes(filter) || answer.includes(filter)) {
                faq.style.display = '';
                highlightText(questionElement, filter);
                highlightText(answerElement, filter);
            } else {
                faq.style.display = 'none';
            }
        });
    }

function highlightText(element, filter) {
        const text = element.textContent;
        const regex = new RegExp(`(${filter})`, 'gi');
        const highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
        element.innerHTML = highlightedText;
    }

function toggleFAQ(button) {
        const answerDiv = button.nextElementSibling;
        answerDiv.classList.toggle('hidden');
    }
</script>

Related Examples

Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

1 month ago

358
about video
about kelaplus video

Author:
Omer fils ELENGA

3 weeks ago

58
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Author:
Nirav Patel

1 year ago

2k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

11.6k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.6k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

5 months ago

705
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Abhijit Sen

2 years ago

17k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

1 year ago

15.1k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

13.7k
Cards Seaction - Services block

Author:
ABDO-SY

4 months ago

757
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 weeks ago

31
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

164

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components