FAQ with Search

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

FAQ

Author Dpk Mht

Tailwind v3.4 2.9k 7

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

Accordions & FAQs with css chevrons: No javascript needed
Chevron toggle without using nested SVG images.

Sherry Lynne

2 months ago

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

Abhijit Sen

3 years ago

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

King Kali

3 years ago

17.2k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

794
FAQ Section with AlpineJS

Maxim

1 year ago

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

Omer fils ELENGA

3 weeks ago

11
Help Center
Help Center

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
FAQ section

Simon Scheffer

3 years ago

11.6k
FAQ - Htmlwind
Offset intro faq section

Htmlwind

1 year ago

1.2k
FAQ Section with smooth Animations

JUGENDRA GANGWAR

4 weeks ago

20
Tailwind FAQ accordion

yousef

2 years ago

6.2k