Component pattern · updated 3 Sept 2026
FAQ accordion
An FAQ accordion is a stack of questions where each answer is collapsed until its question is clicked, letting a page carry many answers without the length. Done well it uses native disclosure elements, keeps every answer in the served HTML, and mirrors the same questions into FAQPage structured data.
Think of it as
A filing cabinet with labelled drawers. You read the labels, you open one drawer, and the rest stay shut, but everything is still in the cabinet.
Worked example
This site's homepage FAQ holds nine questions. The visible answers and the FAQPage schema are rendered from one array, and a build gate asserts they are identical, because a mismatch between the two is a structured-data violation rather than a nuance. Each answer is written to stand alone so an answer engine can quote it whole.
Why it matters
FAQ blocks are the most-quoted content on the web right now: answer engines lift them verbatim. That makes two rules load-bearing. The answers must be in the HTML, not injected on click, and the schema must match the visible text exactly, or the page earns a manual action instead of a rich result.
How it fails
Answers loaded only when a question is expanded, so a crawler sees the questions and nothing else. Schema that lists questions the page does not show. A custom accordion that breaks keyboard access when a native details element would have worked.
What to measure open the decoder →
- Whether the answers exist in the served HTML while collapsed
- Whether FAQPage schema is present and its questions match the visible ones
- Focus styling on the question buttons
- Whether the disclosure uses a native element
Where you meet it
- Pricing pages
- Product pages
- Support and help centres
On this site
The AI-Legibility Check reports whether a page's served HTML carries its words, which is exactly the failure a lazy-loaded accordion produces.
Showcase collections that exhibit it
Build it
Next rung
An FAQ answers the visitor's last objection. The band that follows it is where the page asks for the action, and the two are almost always adjacent for that reason.