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

FAQ section

Author:
Simon Scheffer

3 years ago

10.9k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

11 months ago

2k
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

17.9k
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

1.6k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.5k
about video
about kelaplus video

Author:
Omer fils ELENGA

5 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

330
About Us Component

Author:
KULDEEP

5 months ago

1.2k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

2 months ago

514
FAQ section

Author:
Brandon D

2 years ago

11k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

14.1k
Home
html , css

Author:
Hacker Development

7 months ago

621

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components