CMS FAQ Accordion

An FAQ accordion whose schema is built from the same CMS rows it renders. Your client adds a question, the schema follows. Nothing to update by hand, nothing that can go stale.

Drop one inside a Collection List and connect Question and Answer, or skip the CMS and type them in the panel. Same markup either way.

Schema written by hand stops being true the first time someone edits a row

FAQ schema normally lives in the page's Custom Code, which cannot see your CMS. It is a copy. Someone adds four questions, the page shows twelve, the schema still says eight, and nothing warns you.

Here it is assembled from the same strings that render. In CMS mode every row is a separate, blind instance, so each emits a block carrying the same id, and a processor merges them into one FAQPage. Twelve rows in the HTML, one FAQ in the graph, all pre-rendered.

What it is worth in 2026

Google removed FAQ rich results in May 2026, so no component can promise you that dropdown. FAQPage is still valid schema.org, still read by Bing and by the answer engines, and unused structured data does no harm. It is correct, and it is a switch.

Not every FAQ needs a CMS

Five questions that never change do not need a collection. Switch Source to List and type them in. A client who edits them without you, thirty questions, or a translated site: that is when the CMS earns its keep.

A real button, so the keyboard already works

The trigger is a button element inside the heading tag you choose, with aria-expanded and aria-controls pointing at a labelled region. Enter, Space and the focus ring come from the element. A closed answer stays in the HTML for crawlers but leaves the tab order.

Built properly

Height animates from a CSS grid going 0fr to 1fr: nothing measured, no observer. Reduced motion respected. One open at a time works across a Collection List. Deep links give every row an id from your slug field.

Questions? vitorcoc008@gmail.com