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

1.9k

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

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

152
FAQ Section

Author:
Abdul Baset Bappy

4 days ago

10
Home
html , css

Author:
Hacker Development

1 month ago

44
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

16.6k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

1 month ago

34
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.3k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

717
Simple expanded FAQ example

Author:
Orson Kincaid

8 months ago

1.1k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.4k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

2k
FAQs
This is a FAQ it is made using html and tailwindcss

Author:
ishimwe shadad

1 month ago

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

Author:
Rajesh Maheshwari

3 months ago

620

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components