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

2.3k

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