FAQ Accordion

Animated accordion
Every site needs one

Live preview

Loading preview…

Scroll & click inside the frame — it's the real section running with demo content

Step 1 — your customization message

Integrate the following section into my site, placing it [where on the page].
Replace ALL placeholder text and images with content for my project:
[1-2 sentences about your business/site].
My images are in [folder/paths]. Match the section's colors and fonts
to my site's existing design.

[PASTE THE FULL SECTION PROMPT HERE]

Step 2 — the prompt · FAQ Accordion149 lines · 6,908 chars

You are given a task to integrate an existing React component in the codebase

The codebase should support:
- shadcn project structure
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

What it is

A clean, animated frequently-asked-questions list — click a question, the answer smoothly expands, the others close.

Perfect for

Every site. FAQs quietly handle objections (“How long does it take?”, “What does it cost?”, “Do you work in my area?”) so the visitor doesn't leave to go find answers elsewhere. Place it just before the contact section.

What to prepare

4–8 real questions with honest answers. Steal them from your actual client conversations — the questions people ask you on calls are the questions to answer here.