FAQ Accordion
An accessible FAQ accordion, with optional FAQPage schema that always matches the visible questions.
Copied 0 times.
Members only
This design needs a membership.
Today's price: $1/month, locked forever once you join.
What it does
An FAQ accordion answers the questions standing between a visitor and a yes, without drowning the page in text. Each question is a row that opens when tapped, so people skim the list and open only what they care about. Answers can hold full paragraphs and links.
- The schema option adds a hidden label Google can read, generated from the exact same list as the visible questions, so they can never drift apart.
- Each question is a real button inside a proper heading, the accessible way.
- Full rows are tappable, and everything works with just a keyboard.
- The little arrow flips as each answer opens, so state is obvious.
- Answers expand smoothly; people who prefer less motion get an instant open instead.
How it works
- 1Decide if you want the Google-readable version included, and choose how answers open: one at a time, or as many as people like.
- 2Copy the prompt, the full build directions in one block, into whichever AI you use.
- 3Your AI builds the accordion in your site's own look, with four stand-in questions clearly marked for you to replace.
- 4Swap in the real questions your customers actually ask, keeping each answer to two or three friendly sentences so they stay easy to skim.
- 5If you kept the Google version, it updates itself whenever you edit a question, so the page and the hidden label always match.
- 6Give it a keyboard test before shipping: Tab hops between questions, Enter opens them, and the little arrow flips as they open.
What you can customize
- Schema markup: with it on, your questions can show up as rich results right in Google; plain keeps just the visible accordion.
- How panels open: one at a time keeps the page tidy; independent lets people hold several answers open to compare.
- Heading, colors, and row style adapt to your site, because your AI builds the section right inside your own design.
You'll also like
Floating Chat Launcher
A corner bubble that opens your real contact channels. Honest about not being live chat unless you have one.
App Style Bottom Navigation
An app-style bottom bar for mobile: your key sections as tabs, a raised center action button, and a More sheet for everything else.
You're $19 away from free shipping
Free Shipping Bar
A progress bar that shows how close the cart is to free shipping. Reads the real cart total, updates live.