Skip to content
arrie.dev Templates

Components

Plain Accordion

An FAQ accordion built on details and summary, with FAQ schema from the same file.

R250

Once. Yours to keep

Get this template

The shape of it, not a screenshot

What it is

Questions and answers live in one JSON file. The accordion itself is native details and summary, so it opens from the keyboard, find-in-page can reach a closed answer, and it still works if the JavaScript never loads. The script only adds the height animation, the single-open behaviour and the deep links.

A build step emits FAQPage JSON-LD from the same file the page renders from, so the structured data cannot drift away from the visible answers. Each question gets an anchor, which means you can send someone straight to /faq#refunds. The animation respects prefers-reduced-motion.

Wrong choice if the answers are long enough to deserve their own pages, or if you want search across the set. It stays readable to about twenty questions and gets tiring after that.

Included

What you get

  • Accordion component on details and summary
  • faq.json with questions, answers and groups
  • FAQPage JSON-LD generated at build time
  • Anchor link per question for deep linking
  • Height animation with reduced-motion fallback
  • Single-open and open-all variants
How it works

After you buy

  1. 01 You message me On WhatsApp. Tell me which one and where it is going.
  2. 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
  3. 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
  4. 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.