FAQ Accordion — Instructions
A clean, accessible accordion for FAQs or any “question → answer” content. One click expands an item; it animates open and is fully keyboard accessible.
1 · Preview it
Double-click snippet.html to see it working in your browser. It’s plain HTML, CSS & JavaScript — no install, build, or server needed, and no external libraries.
2 · Add it to your site with Claude
Keep this folder inside your website project (or anywhere Claude Code can read it), then ask Claude something like:
“Add the FAQ accordion from snippet.html in this folder to my About page, using these questions: [list yours].”
“Integrate this FAQ accordion and restyle it to match my site's fonts and colors.”
Prefer to paste it yourself? Open snippet.html, copy the part you need, and tell Claude: “integrate this into [page], matching my site’s existing styles.”
Tip: point Claude at the file by name — e.g. “use the code in
snippet.html from the FAQ-Accordion folder” — so it references the exact snippet.3 · Customize
- Add or remove
.faq__itemblocks for your own Q&A. - Colors and spacing live in the
.faq__q/.faq__astyles. - It uses
aria-expanded, so screen readers announce open/closed state.
Good to know
- No dependencies: works in any site — static HTML, WordPress, React, anything.
- Responsive & accessible: built to behave on phones and with keyboards.
- Yours to change: tweak the colors and text, or ask Claude to restyle it to your brand.
Prepared by Inner Web SolutionsBuilt with Claude