How to build a CMS FAQ accordion in Framer that clients can edit

A manual FAQ accordion in Framer looks fine — until the client wants to add a question, rewrite an answer, or reorder the list. Every item is hand-built on the canvas, so each change means opening Framer and moving layers by hand. Clients cannot edit the content safely. And when you try to make it dynamic by connecting it to the CMS, familiar problems appear: every item shows the same content, the CMS fields will not bind, multiple rows stay open, and the animation jumps.

The solution is a CMS-powered FAQ accordion: one reusable component, one CMS collection, content your client can edit themselves, smooth open/close animation, and intentional auto-collapse. This guide builds it from start to finish — and solves the common problems along the way.

Why a CMS FAQ accordion matters for Framer sites

A CMS-powered FAQ accordion matters whenever the content needs to be editable or reused:

• Client-managed content — clients add and edit questions from the CMS, not Framer.
• Clean scaling — going from 5 to 50 questions is a data change, not a design change.
• Consistent styling — one component controls every item, so the look never drifts.
• Reuse across pages — one collection can feed the FAQ on your homepage, a product page, and a help page.
• Structured Q\&A — separate Question and Answer fields stay consistent and map cleanly into FAQ schema.

Here is exactly what you will build.

What you are going to build

By the end of this guide you will have:

• a Framer CMS Collection for FAQ items
• a reusable accordion Component
• Question and Answer fields bound to the CMS
• a smooth open/close animation
• optional auto-collapse (only one item open at a time)
• optional category filtering
• optional FAQ schema cleanup

Let's build it step by step.

Step 1: Create the FAQ CMS Collection in Framer

Start in the CMS. Create a new CMS Collection and name it FAQ. Add these fields:

• Question — a Text field for the question.
• Answer — a Formatted Text field, so links, bold text, and basic formatting work inside answers.
• Category Option — an Option field, optional, for simple grouping or dropdown filtering.
• Category Reference — a Collection Reference, optional, only if you want native Dynamic Filter tabs.
• Sort Order — a Number field, for predictable manual ordering.

Keep Question and Answer as separate fields, not one combined block. Separate fields let you bind the question to the header and the answer to the body independently, and they map cleanly into FAQ schema later.

Step 2: Build the reusable accordion component

Now build the component once, so every FAQ item reuses it.

1. Create a Frame for one FAQ row.
2. Add a question row at the top — a text layer for the question and an icon (a plus) on the right.
3. Below it, add the answer area — a text layer for the answer.
4. Wrap the answer area in a Stack. This is your answer wrapper.
5. Select everything and choose Create Component, naming it something like FAQ Item.
6. Add Variants to the component: a closed state and an open state.

You will configure those two states next.

Step 3: Animate the accordion correctly

This is where most accordions go wrong. Do not use the visibility toggle hack — setting the answer to not visible in the closed state produces an instant pop, because there is nothing to animate.

The correct setup keeps the answer in the DOM and animates its container:

• Keep the answer content in the layout at all times.
• Wrap it in the Stack from Step 3\.
• Set that wrapper to Overflow: Hidden so extra content is clipped, not pushed out.
• In the closed variant: set the wrapper Height to 0 and Opacity to 0.
• In the open variant: set the wrapper Height to Fit Content and Opacity to 1.
• Add an interaction so tapping the question swaps between the two variants.

Because the only thing changing between variants is the wrapper height, Framer animates that change and you get a smooth expand and collapse.

Step 4: Connect the accordion component to the CMS Collection List

This is the step that makes the accordion dynamic and client-editable.

1. Add a CMS Collection List bound to the FAQ collection, then place your FAQ Item component inside the Collection Item.
2. Open the component and select the Question layer; expose it as a Component Variable (or bind it directly to a field), then bind it to the Question CMS field.
3. Select the Answer layer; bind it to the Answer CMS field.

Common mistake: If every item shows the same question and answer, the text is probably hardcoded in the component or not bound to a CMS field. Never type static text into the master component — expose the layers as variables and bind them, so each CMS item pulls its own values.

For editing many entries at once, see our guide to bulk editing Framer CMS items at scale.

Step 5: Sort and reorder FAQ items

Use the Sort Order number field to control the display order, and set the Collection List to sort by it ascending. Now reordering is a data change: change the numbers in the CMS and the list resequences itself.

This is more reliable than depending on creation date or the order layers sit on the canvas — especially when clients will manage the FAQs, since they can reorder questions without touching Framer.

Optional category filters for larger FAQ sections

For a longer FAQ, you can filter by category. A Category Option field works well for a simple dropdown or segmented filter. If you want native Dynamic Filter tabs, those require a Collection Reference or Multi Collection Reference field — they expect categories to be their own collections. Custom tabs are possible but should not be the default beginner recommendation; a dropdown is simpler with an Option field.

For a deeper walkthrough, see our guide on creating filters in Framer CMS. And if an FAQ section ends up empty on certain pages, learn how to hide empty CMS sections on your Framer website.

Troubleshooting common Framer FAQ accordion issues

Here's how to fix the most common problems:

• Every accordion item shows the same question and answer: The text was typed into the master component. Expose the Question and Answer layers as Component Variables and bind them to CMS fields inside a CMS Collection List.
• CMS fields will not bind inside the component: The layers are plain text, not bound variables. If the field is not updating per CMS item, check that the text layer’s Content value is connected with Set Variable and points to the correct CMS field.
• The answer pops instead of expanding: You are using a visibility toggle. Keep the answer in the DOM, wrap it in a Stack set to Overflow: Hidden, and animate the wrapper Height from 0 to Fit Content.
• Multiple rows stay open at the same time: Each row animates independently. Coordinate the open state with a parent wrapper component that has a variant for each single-open state.
• The section jumps, overlaps, or cuts off on mobile: Use the same Ease and Duration on the accordion and its parent, set the open state to Fit Content, and avoid fixed heights for long answers.
• Dynamic Filter tabs are not available: Native filter tabs require a Collection Reference (or Multi Collection Reference) field, not an Option field.

Frequently asked questions about Framer CMS FAQ accordions

Does Framer have a built-in Accordion component, and can I connect it to the CMS?

Yes. Framer ships a native Accordion component you can insert from the components panel, and you can place it inside a CMS Collection List so each item pulls from your FAQ collection. This guide builds a custom accordion component instead, for two reasons: full control over the open/close animation (height and opacity variants instead of a visibility toggle that pops), and a clean structure for optional auto-collapse and category filters. If your FAQ is short and you want it working fast, the native component is a fine starting point — the binding steps in this guide still apply: expose the Question and Answer layers as Component Variables and bind them to your CMS fields.

How do I build a client-editable FAQ accordion in Framer?

Create a CMS Collection with separate Question and Answer fields, build one reusable accordion Component, place it inside a CMS Collection List, and bind the question and answer layers to the CMS fields. Clients then add and edit questions from the CMS without opening Framer.

Why does every item in my Framer CMS accordion show the same text?

The question and answer were typed directly into the master component, so every instance copies that text. Expose both layers as Component Variables and bind them to the Question and Answer CMS fields — each item then pulls its own values.

How do I connect a Framer accordion to the CMS?

Drag the accordion Component onto the page, wrap it in a CMS Collection List bound to your FAQ collection, then bind the Question layer to the Question field and the Answer layer to the Answer field. Use a Rich Text (Formatted Text) field for the answer so links and bold work inside it.

How do I make a Framer accordion animate smoothly without jumping?

Do not toggle visibility. Keep the answer in the layout, wrap it in a Stack with Overflow: Hidden, and use two variants: a closed state with the wrapper Height at 0 and Opacity at 0, and an open state with Height at Fit Content and Opacity at 1. Framer animates the height change for a smooth expand and collapse.

How do I make a Framer accordion auto-collapse (one item open at a time)?

Auto-collapse is optional and needs coordination. For a typical 5–15 item FAQ, build a parent wrapper component with a variant for each single-open state (only \#1 open, only \#2 open, and so on) and add interactions so opening an item switches the wrapper to that variant.

Can I add links inside Framer CMS accordion answers?

Yes. Make the Answer field a Rich Text (Formatted Text) field, and you can add hyperlinks, bold, and other formatting inside each answer straight from the CMS. Rich Text answers are what let you cross-link to related guides without leaving the CMS.

Are Framer accordion answers crawlable by Google when collapsed?

Framer’s recommended setup for indexable accordion content is to keep the answer in the page structure and hide it visually with Height 0 and Opacity 0 in the collapsed state, then use Fit Content and Opacity 1 in the expanded state. The height-based animation in this guide keeps the answer in the DOM and only clips it visually with Overflow: Hidden, so the content stays indexable even when collapsed. Avoid hiding answers with display: none, which can make content harder to crawl. To make the Q\&A explicit for machines regardless of open state, add FAQPage JSON-LD schema.

Does Framer FAQ schema still help with SEO in 2026?

Add FAQPage schema to document your Q\&A content cleanly, but do not expect Google FAQ rich results — Google deprecated them for most sites. Treat schema as optional cleanup, not a ranking reason.

Conclusion

A CMS-powered FAQ accordion gives you one reusable component, content your clients edit themselves, smooth height-based animation, and optional auto-collapse — all driven by a single FAQ collection. Bind the Question and Answer layers to CMS fields, animate the wrapper height instead of toggling visibility, and keep auto-collapse intentional.

If you would rather have an experienced team handle the Framer build — CMS structure, a reusable component, and smooth animation — BRIX Templates works with Framer agencies that can take it off your plate.