Home
Maxim
FAQ Section with AlpineJS

FAQ Section with AlpineJS

This tailwind example is contributed by Maxim, on 18-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Maxim

634

1

Fork Fullscreen

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="mx-auto">
    <div class="p-4">
        <div class="mt-2">
            <div x-data="{ activeTab: 'all', openItem: null }">
                <div class="mb-6">
                    <div class="flex flex-wrap gap-2 mb-4">
                        <button
						@click="activeTab = 'all'"
						:class="activeTab === 'all' ? 'bg-zinc-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
						class="px-4 py-2 rounded-lg text-lg font-medium transition-colors">
					All Sections
					</button>
                        <button
						@click="activeTab = 'General'"
						:class="activeTab === 'General' ? 'bg-zinc-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
						class="px-4 py-2 rounded-lg text-lg font-medium transition-colors">
					General                            </button>
                        <button
						@click="activeTab = 'Transportation'"
						:class="activeTab === 'Transportation' ? 'bg-zinc-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
						class="px-4 py-2 rounded-lg text-lg font-medium transition-colors">
					Transportation                            </button>
                        <button
						@click="activeTab = 'Culture &amp;amp; Lifestyle'"
						:class="activeTab === 'Culture &amp;amp; Lifestyle' ? 'bg-zinc-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
						class="px-4 py-2 rounded-lg text-lg font-medium transition-colors">
					Culture &amp; Lifestyle                            </button>
                        <button
						@click="activeTab = 'Housing &amp;amp; Neighborhoods'"
						:class="activeTab === 'Housing &amp;amp; Neighborhoods' ? 'bg-zinc-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300'"
						class="px-4 py-2 rounded-lg text-lg font-medium transition-colors">
					Housing &amp; Neighborhoods                            </button>
                    </div>
                </div>
                <div class="space-y-8">
                    <div x-show="activeTab === 'all' || activeTab === 'General'" class="faq-section">
                        <h2 class="text-xl sm:text-3xl font-bold text-gray-900 mb-4 pb-2 border-b-2 border-black">
                            General
                        </h2>
                        <div class="space-y-4">
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'General_0' ? null : 'General_0'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">What is the cost of living like in Pittsburgh?</span>
								<svg 
									:class="openItem === 'General_0' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'General_0'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Pittsburgh has a relatively affordable cost of living compared to other major
                                        U.S. cities. Housing is reasonably priced, and utilities, transportation, and
                                        groceries are generally lower than the national average.
                                    </div>
                                </div>
                            </div>
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'General_1' ? null : 'General_1'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">What is the weather like in Pittsburgh?</span>
								<svg 
									:class="openItem === 'General_1' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'General_1'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Pittsburgh experiences all four seasons. Winters can be cold and snowy, while
                                        summers are warm and humid. Spring and fall offer mild and pleasant weather.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div x-show="activeTab === 'all' || activeTab === 'Transportation'" class="faq-section">
                        <h2 class="text-xl sm:text-3xl font-bold text-gray-900 mb-4 pb-2 border-b-2 border-black">
                            Transportation
                        </h2>
                        <div class="space-y-4">
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Transportation_0' ? null : 'Transportation_0'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">Does Pittsburgh have good public transportation?</span>
								<svg 
									:class="openItem === 'Transportation_0' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Transportation_0'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Yes, Pittsburgh has a public transit system called the Port Authority, which
                                        includes buses, light rail (the &quot;T&quot;), and inclines. However, some
                                        neighborhoods may have limited access.
                                    </div>
                                </div>
                            </div>
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Transportation_1' ? null : 'Transportation_1'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">Is Pittsburgh a bike-friendly city?</span>
								<svg 
									:class="openItem === 'Transportation_1' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Transportation_1'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Pittsburgh is improving its bike infrastructure with dedicated bike lanes and
                                        trails. The Great Allegheny Passage is a popular biking route that connects to
                                        Washington, D.C.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div x-show="activeTab === 'all' || activeTab === 'Culture &amp;amp; Lifestyle'"
                        class="faq-section">
                        <h2 class="text-xl sm:text-3xl font-bold text-gray-900 mb-4 pb-2 border-b-2 border-black">
                            Culture &amp; Lifestyle
                        </h2>
                        <div class="space-y-4">
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Culture &amp; Lifestyle_0' ? null : 'Culture &amp; Lifestyle_0'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">What are some popular things to do in Pittsburgh?</span>
								<svg 
									:class="openItem === 'Culture &amp; Lifestyle_0' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Culture &amp; Lifestyle_0'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Pittsburgh is known for its museums, sports teams, and scenic views. The Andy
                                        Warhol Museum, PNC Park, and Mount Washington are must-visit attractions.
                                    </div>
                                </div>
                            </div>
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Culture &amp; Lifestyle_1' ? null : 'Culture &amp; Lifestyle_1'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">Is Pittsburgh a good place for food lovers?</span>
								<svg 
									:class="openItem === 'Culture &amp; Lifestyle_1' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Culture &amp; Lifestyle_1'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Yes! Pittsburgh has a vibrant food scene, featuring local favorites like
                                        Primanti Bros. sandwiches, pierogies, and diverse international cuisine.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div x-show="activeTab === 'all' || activeTab === 'Housing &amp;amp; Neighborhoods'"
                        class="faq-section">
                        <h2 class="text-xl sm:text-3xl font-bold text-gray-900 mb-4 pb-2 border-b-2 border-black">
                            Housing &amp; Neighborhoods
                        </h2>
                        <div class="space-y-4">
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Housing &amp; Neighborhoods_0' ? null : 'Housing &amp; Neighborhoods_0'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">What are some of the best neighborhoods to live in?</span>
								<svg 
									:class="openItem === 'Housing &amp; Neighborhoods_0' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Housing &amp; Neighborhoods_0'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Popular neighborhoods include Shadyside and Squirrel Hill for a mix of
                                        residential and commercial spaces, Lawrenceville for its artsy vibe, and Mount
                                        Washington for stunning city views.
                                    </div>
                                </div>
                            </div>
                            <div class="overflow-hidden border-b border-gray-500">
                                <button
								@click="openItem = openItem === 'Housing &amp; Neighborhoods_1' ? null : 'Housing &amp; Neighborhoods_1'"
								class="w-full text-left py-4 flex justify-between items-center focus:outline-none">
								<span class="font-medium text-lg">Is Pittsburgh a good city for families?</span>
								<svg 
									:class="openItem === 'Housing &amp; Neighborhoods_1' ? 'rotate-180' : ''" 
									class="transform transition-transform duration-200 w-5 h-5 text-zinc-700" 
									fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path>
								</svg>
							</button>
                                <div x-cloak x-show="openItem === 'Housing &amp; Neighborhoods_1'"
                                    x-transition:enter="transition ease-out duration-200"
                                    x-transition:enter-start="opacity-0 transform -translate-y-2"
                                    x-transition:enter-end="opacity-100 transform translate-y-0"
                                    x-transition:leave="transition ease-in duration-200"
                                    x-transition:leave-start="opacity-100 transform translate-y-0"
                                    x-transition:leave-end="opacity-0 transform -translate-y-2"
                                    class="py-8 px-8 border-t border-gray-100 bg-zinc-100">
                                    <div class="prose prose-sm max-w-none text-black text-lg">
                                        Yes, Pittsburgh is known for its family-friendly environment, good schools, and
                                        many parks and cultural activities suitable for children.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>

Related Examples

Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

1 year ago

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

14.6k
FAQ with Tailwind CSS and Alpine.js

Author:
ᴀʀ!ᴀ

2 months ago

373
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.2k
Accordion FAQ

Author:
Nikola Małecka

4 months ago

506
Home
html , css

Author:
Hacker Development

3 weeks ago

41
FAQ with Search

Author:
Dpk Mht

11 months ago

1.8k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

703
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

13.7k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

1 week ago

14
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 months ago

386
FAQ section

Author:
Brandon D

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1