What is a morphing accordion?
A morphing accordion is a stack of question rows drawn as ink pills — an index, the question and a plus sign. Tap a pill and a rounded answer panel grows out of it: during the move the two shapes are blurred and re-thresholded so they merge like liquid, then settle with a brief elastic overshoot while the plus turns into a cross and the answer slides up into view.
Closed rows sit as plain pills, so a long list of questions stays compact and scannable, and readers jump straight to the one they care about.
When to use an FAQ
- Pre-sale objections — answer the questions that block a purchase, near the end of a pitch or product page.
- Onboarding & support — reduce repetitive tickets with the answers people actually look for.
- Pricing and policy details — clarify the fine print without a wall of text.
How it works
Every row is a pill in the story's text colour with the question set in the background colour, so it inverts cleanly on light and dark pages. Opening a row draws a second rounded shape beneath the pill and morphs it into the answer panel through an SVG blur and colour-matrix filter — the classic liquid "goo" — with an elastic ease that overshoots once and settles. The plus icon rotates into a cross, the answer slides up behind a mask, and the row above gains a little air.
One row is open at a time by default: opening another closes the first. The first question starts open so the section never looks empty; both are options. The arrow keys move between questions and Enter or Space toggles them. Readers who prefer reduced motion get the states without the animation. On phones the pills tighten and the index disappears under 480px.
FAQ and SEO
Question/answer content is exactly what search engines surface in rich results. Inside a Scrollytelling page the Q&As render as real, crawlable text, and the widget pages here add FAQPage structured data, which can qualify answers for rich results.
Best practices
- Write questions the way people actually ask them.
- Keep answers short and specific — two or three sentences.
- Order by what matters most, not alphabetically.
- Four to eight questions keeps the stack scannable.
How to make an FAQ — free
Edit the questions above
Add your real Q&As, choose whether the first one starts open, and pick your colours.Embed or download
Copy the embed code or save a standalone HTML file.Add it to a page
Drop an FAQ into a full Scrollytelling story — free to start.
Templates that use a FAQ
Want a head start? These ready-made, fully-editable templates put the FAQ to work — customize one and publish in minutes.
FAQ accordion — frequently asked questions
Is the FAQ widget free?
Yes — build and embed an FAQ with no account or payment.
Does the FAQ help SEO?
Our widget pages emit FAQ structured data (FAQPage), which can qualify answers for rich results. Inside a story, the Q&As render as crawlable text.
Can several answers be open at once?
By default opening a question closes the previous one. Switch Several open at once on and readers can keep as many open as they like.
Does it work on mobile?
Yes — it is fully responsive: on phones the pills tighten and the question index is hidden under 480px, and the morph runs the same.