FAQ Accordion

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–5 of 44
FAQ

FAQ Accordion

Responsive · Animated
FAQ

Split FAQ With Contact Card

Responsive · Animated
FAQ

FAQ Grid

Responsive · Animated
Hero

SaaS Split Hero

Responsive · Animated
Features

Icon Grid Features

Responsive · Animated

FAQ Accordion — Free Website Section Template

FAQ · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryFAQ
Tagsfaqaccordionquestionsdetails summaryschemasaaslight
Updated October 20, 2026

What's included

Features

Single-column accordion on native details/summary
One question open at a time; the first opens on load
GSAP height animation and rotating plus/minus icon
Works without JavaScript; keyboard and find-in-page friendly
FAQPage JSON-LD built from your questions in the HTML export
Up to 15 questions: add, duplicate, reorder, remove
Contact line with its own link, switchable
Export HTML, a ZIP, React or Vue

About this section

FAQ Accordion — Free Animated FAQ Section Template

FAQ Accordion: A centred FAQ section: heading and intro, then a single column of questions that expand smoothly to show their answers, one at a time, with a rotating plus/minus icon. A contact line underneath catches anyone whose question isn’t answered.

FAQ Accordion is the FAQ section most websites need: a centred heading and intro, a single column of questions that expand to show their answers, and a contact line for anyone still unsure. The first question starts open, and opening another closes the previous one, so the list always stays tidy.

Built on native HTML

Every question is a real <details> and <summary> element. That means it works with no JavaScript at all, keyboard users can tab through and press Enter or Space, the browser's find-in-page opens matching answers, and every answer is in the HTML, where search engines can read it.

Smooth with GSAP

With GSAP loaded, answers open with a smooth height animation and their text slides in, while the plus icon rotates into a minus. Closing animates too. People who prefer reduced motion get instant open and close.

FAQPage schema included

The exported HTML page includes FAQPage structured data (JSON-LD) built from your questions and answers, ready for Google's FAQ rich results and for AI assistants that read structured data.

Edit and export

Add up to fifteen questions, reorder them so the most common come first, and edit or switch off the contact line. Export HTML, a ZIP, React or Vue, or fork into My Code.

Why use it

Why Use the FAQ Accordion

?
Answers objections
A good FAQ handles the doubts that stop people signing up, right where they have them.
⌘
Accessible by default
Native details/summary gives keyboard support, screen-reader semantics and find-in-page for free.
⭐
Search-friendly
All answers stay in the HTML, and FAQPage schema helps search engines and AI understand them.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading, questions and contact line in the panel. Switch the contact line on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

💳
Under a pricing table
Answer questions about trials, plan changes, refunds and discounts right below your plans, where hesitation is highest.
🚀
Landing page closer
End a landing page with the six questions prospects ask most, followed by a link to talk to your team.
🛟
Help-centre topic page
Group questions about one topic, such as billing or accounts, on its own help page with the schema included.
🎟️
Event or course page
Cover dates, refunds, recordings and certificates so attendees don’t need to email you before registering.

Got questions?

Frequently Asked Questions

Yes. Each question is a native details/summary element, so it opens and closes in every browser without any script. GSAP only adds the smooth animation and the one-at-a-time behaviour.

Yes. The exported HTML page includes FAQPage JSON-LD generated from your questions and answers. For React or Vue, add the same JSON-LD to your page head with your framework’s head manager.

In this section, opening a question closes the previous one. For multiple open answers, use the Split FAQ With Contact Card, or remove "single" from the data-accordion attribute in the exported code.

Yes. Summary elements are focusable and toggle with Enter or Space, screen readers announce them as expandable, and animation is skipped for people who prefer reduced motion.

It saves an editable copy of your FAQ Accordion in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.