How to Build an FAQ Accordion in Webflow That Also Wins AI Search

An FAQ accordion in Webflow takes about fifteen minutes to build with native interactions, no custom code required. But most tutorials stop there, and that is where the real opportunity gets left on the table. The accordion itself is just the container. The actual win is pairing it with FAQPage schema and writing question-format headings that AI search engines cite directly.

I have built FAQ sections on clinic sites, med spa sites, and local service businesses where the accordion alone did nothing for traffic. Adding schema and restructuring the copy turned those same FAQs into AI-cited answers. Here is exactly how to do both.

Build the accordion structure first

Start with a parent div that holds all your FAQ items. Inside it, create one div block per question. Each item div gets two children: a trigger div (the question row) and a content div (the answer panel).

The trigger div holds your question text and a chevron or plus icon. The content div holds the answer paragraph. Set the content div's initial display to hidden or its height to 0px, depending on whether you want a height animation or a simple show/hide.

Here is the structure at a glance:

• FAQ Wrapper (div block)
  • FAQ Item (div block, repeated per question)
    • FAQ Trigger (div block, set as the click target)
      • Question text (heading or paragraph)
      • Icon (chevron or plus sign)
    • FAQ Content (div block, initially collapsed)
      • Answer text (paragraph)

Give each element a clear class name. I use faq-item, faq-trigger, and faq-content. Clean class names matter because you will be targeting them with interactions next.

Set up the interaction to expand and collapse

Select the FAQ Trigger div and add a Mouse Click interaction. You want two states: the first click expands, the second click collapses.

First click (open):

1. Target the sibling FAQ Content div. Set its height from 0px to Auto. Use a 300ms ease-out for a smooth feel.
2. Optionally rotate the chevron icon 180 degrees (or 45 degrees if you are using a plus icon turning into an X).

Second click (close):

1. Reverse both. Height goes from Auto back to 0px. Chevron rotates back to 0 degrees.

Set the interaction to affect "only children with this class" so each FAQ item operates independently. This is the setting people miss. Without it, clicking one item opens every item on the page.

One open at a time, or multiple open at once

This is a UX decision, not a technical one. For local service businesses and clinics, I almost always recommend one at a time. Visitors usually scan for a single specific answer like "do you accept insurance" or "how long is the appointment." Keeping one open at a time reduces visual noise and keeps the page compact.

If you want one-at-a-time behavior, add a second action to the first click: before opening the clicked item, close all other FAQ Content divs. Target "all elements with this class" and set height to 0px with a 200ms duration. Then open the clicked item. The close-all fires first, then the open fires, and the result is clean.

For comparison pages or knowledge bases where people read multiple answers in context, let them open several at once. Just skip the close-all step.

Add FAQPage schema so machines can parse your Q&A

This is where the accordion stops being just a UI component and starts being a machine-readable asset. FAQPage structured data tells search engines and AI crawlers exactly which questions and answers live on your page.

One important caveat: as of August 2023, Google only shows FAQ rich results (the expandable Q&A under your listing) for authoritative government and health websites. For most sites, the schema will not produce those expandable snippets anymore. It is still worth adding, because it gives AI search engines and assistants a clean, labeled Q&A structure to parse and cite.

Go to your page settings in Webflow. Scroll down to the Custom Code section and paste your schema in the Head Code box. Here is the format:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How long does a typical appointment take?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A typical appointment takes 30 to 45 minutes, including consultation and treatment."
      }
    },
    {
      "@type": "Question",
      "name": "Do you accept insurance?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "We accept most major insurance providers. Contact our office for specific plan details."
      }
    }
  ]
}
</script>

Each question-answer pair becomes a separate object inside the mainEntity array. Match the text exactly to what appears in your accordion. Google cross-references the schema against the visible page content, and mismatches can get your rich results revoked.

After publishing, validate the markup with Google's Rich Results Test or the Schema Markup Validator. Paste your page URL, run the test, and confirm the FAQPage items are detected and error-free, even if your site is not eligible for the rich result display.

Write question-format headings that AI engines cite

This is the part almost nobody talks about yet, and it matters more every month. AI search engines like ChatGPT search, Perplexity, and Google's AI Overviews pull answers from pages that clearly match the user's question. The matching happens on structure as much as content.

Use actual question phrasing for your FAQ headings. Not "Appointment Duration" but "How long does a typical appointment take?" Not "Insurance Information" but "Do you accept insurance?"

Why does phrasing matter this much? AI engines are looking for a question that matches the user query and a concise answer immediately following it. When your heading is the question and your first paragraph is a direct answer, you are giving the AI exactly the format it wants to cite.

I have seen this pattern work on multiple clinic and med spa sites. A page that had zero AI citations added question-format headings and short direct answers. Within a few weeks, Perplexity was citing the page for three different queries. Nothing else changed. Same content, just restructured.

Keep answers under 300 words for snippet pickup

Long, rambling answers kill your chances in both featured snippets and AI citations. Both systems prefer concise, self-contained answers.

Here is the discipline that works:

1. Answer the question in the first sentence. Do not build up to it. Put the answer first, then add context.
2. Stay under 300 words per answer. Google's featured snippet cutoff hovers around 40 to 50 words for paragraph snippets, but the full FAQ answer should still be digestible. Under 300 keeps it tight enough for AI citation while leaving room for useful detail.
3. Use simple language. Write at an 8th-grade reading level. This is not about dumbing it down. It is about removing unnecessary jargon so both humans and machines parse it cleanly.
4. One answer per question. Do not bundle two topics into one FAQ item. "Do you accept insurance and what are your hours?" should be two separate items.

If you find yourself writing 500 words for a single FAQ answer, that answer is probably a blog post, not a FAQ item. Move the deep content to its own page and keep the FAQ answer as a summary with a link.

Make it CMS-driven if you have a lot of questions

For sites with more than ten or fifteen FAQ items, or for businesses that update their FAQs frequently, connect the accordion to Webflow CMS. Create a FAQ collection with fields for question, answer, category, and sort order. Then bind your accordion structure to the collection list.

The benefit is editorial independence. A clinic office manager can log into Webflow, add a new FAQ, and it appears on the page in the right spot without touching the design or the interactions. The interaction still works because it targets classes, not specific elements.

One catch: the FAQPage schema cannot be dynamically generated from CMS in Webflow's native custom code field. You will either need to update the schema manually when FAQs change, or use a third-party tool to generate it from the CMS data on page load.

Common mistakes that break the accordion or the SEO

Overflow hidden on the wrapper. If your FAQ Wrapper has overflow: hidden set, the height animation can clip content during the transition. Set overflow to visible on the wrapper and hidden only on the FAQ Content div if needed.

Missing alt text on icons. Screen readers need to know what that chevron does. Add an aria-label or descriptive alt text to the toggle icon, or better yet, use a button element for the trigger so it is keyboard-accessible by default.

Duplicate schema across pages. If you copy the same FAQ schema to multiple pages, Google may ignore it entirely. Each page should have unique FAQ content and matching schema.

Forgetting mobile. Test the accordion on a real phone. Tap targets should be at least 44px tall, and the answer text should be readable without zooming. Most of the local service queries where your FAQ content can surface come from mobile.

Where the FAQ accordion fits in a page

For service businesses and clinics, the FAQ section works best near the bottom of the page, after you have established what you do and why someone should choose you. It handles objections right before the visitor hits the final CTA.

On landing pages, place it between the social proof section and the closing call to action. The FAQ answers the "yeah, but..." questions that sit between interest and conversion.

For strategy-driven site builds, I plan the FAQ content during the positioning phase, not as an afterthought. The questions visitors actually ask reveal what your messaging is not answering clearly enough higher on the page. Fix the page copy first, and the FAQ handles the remaining edge cases.

The accordion is fifteen minutes of work. The schema and content structure are what turn those fifteen minutes into rich results and AI citations that keep bringing traffic for months.