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

1.3k

3

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

FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

1 year ago

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

Author:
ishimwe shadad

6 months ago

693
about video
about kelaplus video

Author:
Omer fils ELENGA

4 months ago

503
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

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

10 months ago

1.9k
Tailwind FAQ accordion

Author:
yousef

1 year ago

5k
Cards Seaction - Services block

Author:
ABDO-SY

8 months ago

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

Author:
King Kali

2 years ago

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

Author:
Nirav Patel

1 year ago

2.2k
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

10 months ago

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

Author:
Manuela Bianka

3 years ago

11.8k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

1 week ago

32

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ 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.12