Back to search
98Views
0Likes
0Downloads
Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FAQ Accordion Component | Animated Expand Collapse UI</title>
<meta
name="description"
content="A fully accessible animated FAQ accordion component built with HTML, CSS, and JavaScript. Features smooth expand/collapse animation, keyboard navigation, and clean modern UI design."
/>
<meta
name="keywords"
content="FAQ accordion, animated accordion, expand collapse, accessible accordion, HTML CSS JavaScript, UI component, frequently asked questions"
/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body
class="bg-pattern min-h-screen flex items-center justify-center px-4 py-16"
>
<div class="w-full max-w-2xl mx-auto">
<!-- Header -->
<div class="text-center mb-12">
<div class="header-badge mb-4">
<svg
width="13"
height="13"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
<path d="M12 17h.01" />
</svg>
Support Center
</div>
<h1
class="text-3xl sm:text-[2.5rem] font-700 text-gray-900 tracking-tight leading-tight"
>
Frequently Asked
<span
class="bg-gradient-to-r from-indigo-500 to-violet-500 bg-clip-text text-transparent"
>
Questions</span
>
</h1>
<p
class="mt-4 text-gray-400 text-[15px] max-w-md mx-auto leading-relaxed"
>
Everything you need to know to get started. Can't find your answer?
Reach out to our team.
</p>
</div>
<!-- Accordion Container -->
<div id="accordion" class="flex flex-col gap-3" role="list">
<!-- Item 1 -->
<div
class="accordion-item"
style="animation-delay: 0.05s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-1"
id="trigger-1"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>01</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>What is included in the free plan?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-1"
role="region"
aria-labelledby="trigger-1"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
The free plan includes up to 3 projects, 1GB of storage,
community support, and access to all core features. It's
perfect for personal use or trying out the platform before
upgrading. No credit card required to get started.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div
class="accordion-item"
style="animation-delay: 0.1s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-2"
id="trigger-2"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>02</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>How do I upgrade or change my subscription?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-2"
role="region"
aria-labelledby="trigger-2"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
Navigate to your account settings and select the "Billing"
tab. From there you can view available plans, compare
features side by side, and upgrade instantly. Changes take
effect immediately, and you'll only be charged a prorated
amount for the remainder of your billing cycle.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div
class="accordion-item"
style="animation-delay: 0.15s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-3"
id="trigger-3"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>03</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>Can I invite team members to collaborate?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-3"
role="region"
aria-labelledby="trigger-3"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
Absolutely! On Pro and Enterprise plans, you can invite
unlimited team members with granular role-based permissions.
Assign roles like Admin, Editor, or Viewer to control
access. Team members receive an email invitation and can
join your workspace instantly.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Item 4 -->
<div
class="accordion-item"
style="animation-delay: 0.2s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-4"
id="trigger-4"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>04</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>Is my data secure and encrypted?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-4"
role="region"
aria-labelledby="trigger-4"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
Security is our top priority. All data is encrypted at rest
using AES-256 and in transit with TLS 1.3. We conduct
regular third-party security audits, maintain SOC 2 Type II
compliance, and offer two-factor authentication for all
accounts. Your data is backed up daily across multiple
geographic regions.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Item 5 -->
<div
class="accordion-item"
style="animation-delay: 0.25s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-5"
id="trigger-5"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>05</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>What is your cancellation and refund policy?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-5"
role="region"
aria-labelledby="trigger-5"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
You can cancel your subscription at any time from the
billing settings — no questions asked. If you cancel within
the first 14 days, we offer a full refund. After that, your
plan remains active until the end of the current billing
period. All your data can be exported before account
closure.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Item 6 -->
<div
class="accordion-item"
style="animation-delay: 0.3s"
role="listitem"
>
<div
class="accordion-card relative bg-white rounded-2xl border border-gray-100 shadow-sm shadow-gray-100 overflow-hidden"
>
<button
class="accordion-trigger w-full flex items-center gap-4 px-5 py-4 text-left cursor-pointer"
aria-expanded="false"
aria-controls="panel-6"
id="trigger-6"
>
<span
class="num-badge flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 text-indigo-500 text-[13px] font-700 flex items-center justify-center"
>06</span
>
<span
class="flex-1 text-[15px] font-600 text-gray-800 leading-snug"
>Do you offer integrations with other tools?</span
>
<div class="chevron-wrap">
<svg
class="chevron-icon w-4 h-4 text-indigo-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9" />
</svg>
</div>
</button>
<div class="accordion-divider mx-5"></div>
<div
class="accordion-body"
id="panel-6"
role="region"
aria-labelledby="trigger-6"
>
<div class="accordion-body-inner">
<div class="px-5 pt-4 pb-5 pl-[4.25rem]">
<p class="text-[14px] text-gray-500 leading-relaxed">
Yes! We integrate seamlessly with over 50 popular tools
including Slack, GitHub, Figma, Notion, Jira, and Zapier.
Our open REST API and webhooks allow you to build custom
integrations tailored to your workflow. Check our
integrations marketplace for the full list.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer note -->
<div class="text-center mt-10">
<p class="text-sm text-gray-400">
Still have questions?
<a
href="#"
class="text-indigo-500 hover:text-indigo-600 font-600 transition-colors duration-200 underline underline-offset-2 decoration-indigo-200 hover:decoration-indigo-400"
>
Contact our team
</a>
</p>
</div>
</div>
<script src="app.js"></script>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
Animated FAQ accordion with numbered badge indicators, smooth expand/collapse, indigo gradient glow, chevron rotation, and full keyboard accessibility. HTML,Tailwind CSS & JS.
Added Apr 12, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation