Collapsible FAQ
One line in, one self-contained index.html out: a two-part section — a gradient call-to-action beside a stack of questions that open one at a time, each answer sliding down under a rotating chevron.
We made two examples: a violet call panel for Vibary, and a copper one for the Tidewater Museum with visiting questions in place of product ones. Both have the call beside the questions, the first row open under a turned chevron, and the same hairline stack.
Everything comes from the fields: the call-to-action heading and line, and the four question-and-answer pairs. The screenshot shows the first question open. In the file, opening a question slides its answer down under a turning chevron, and opening another closes the one before, so only one is ever open. With reduced motion, answers show and hide without the slide.
Generated for this library
Input
Brief the closing FAQ for Vibary
CTA Design your / next screen. · Say it once. Open the
file. Ship it today. · Open the studio
Questions What do I actually get? · one self-contained file … /
Do I need a framework? · no build step … /
Can I change the look? · every colour is a token … /
Is the motion accessible? · reduced motion honoured …
Palette --ground #0a0a0b · --card #131316 · --ink #f2f2f3 ·
--muted #a3a3ad · --accent #7c7cf0
Returned 1 file · index.html · CTA panel beside the questions
call a gradient panel: heading, line, one lifting button
faq a stack of questions with chevrons, hairline-divided
drop opening a row slides its answer down and turns the
chevron; opening another closes the last — one open
rest all closed at rest; reduced motion shows/hides, no slide
fold on a phone the call stacks above the questionsYou fill in 6 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The CTA heading (one or two lines)
- 3The CTA line
- 4The CTA button
- 5The questions
- 6The palette (one :root block)
Collapsible FAQ
What this makes
One line in, one self-contained index.html out: a two-part section — a gradient call-to-action beside a stack of questions that open one at a time, each answer sliding down under a rotating chevron.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the six slot lines — each question is a prompt and its answer; the CTA slots fill the panel beside them.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser, then open a question to slide its answer down, and another to close the first.
- Add or reorder questions freely; the open-one-at-a-time behaviour holds however many there are.
What you swap
- The brief (one line)
- the closing FAQ for Vibary — answer, then ask for the click
- The CTA heading (one or two lines)
- Design your / next screen.
- The CTA line
- Say it once. Open the file. Ship it today.
- The CTA button
- Open the studio
- The questions
- What do I actually get? · One self-contained file you can open and paste anywhere. / Do I need a framework? · No — the output runs on its own, no build step. / Can I change the look? · Yes, every colour is a token you edit in one place. / Is the motion accessible? · Reduced motion is honoured in every skill.
- The palette (one :root block)
- --ground #0a0a0b · --card #131316 · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0
Before it runs
- Real questions with real answers — three to six pairs; a FAQ of one question is a sentence.
- Answers of a line or two, not essays; the column stays a column because each answer is short.
- A palette of five values — the ground, the cards, the dividers and the gradient call are drawn from them.
When to reach for it
When the last thing a page needs is to answer the doubts and ask for the click — the FAQ-and-CTA that closes a landing. The open-one-at-a-time behaviour and the layout are fixed; the questions and the call are yours.
What changes
- A single index.html with no build step and no outside request: one closing section of questions and a call to act.
- The questions open one at a time — opening a new one closes the last — so the column never sprawls.
- Each answer slides down smoothly from nothing while its chevron rotates, and slides back up when closed.
- A gradient call-to-action panel sits beside the questions: a heading, a line and one button that lifts on hover.
- With reduced motion the answers appear and disappear without the slide, and the gradient holds still.
Pairs with
- 3D Tilt CardOne line in, one self-contained index.html out: a single showpiece card that tilts in 3D toward the cursor, a sheen sliding across its face while its emblem and title float at depth — a card that feels held, not printed.
- Hover Marquee CardsOne line in, one self-contained index.html out: a section whose cards ride an endless marquee, drifting sideways forever until the cursor arrives — then the strip holds and the card under the cursor lifts.
- Scroll Reveal SectionOne line in, one self-contained index.html out: a single page section that rises into place as it enters the view, each card ringed by a light that follows the cursor — pick pricing, features, footer or a call to action.