Vanilla JavaScript Projects

Project 89, Content and data

Searchable FAQ

A help page people can actually use. Type a few letters and the right answer opens, with a link you can share and schema markup for search engines.

?
Main API
details and summary
SEO
FAQPage JSON-LD
Dependencies
None
Your browser
Checking

Help center

Search for something like refund, password or shipping. Filter by topic, copy a link to an answer and vote on whether it helped.

See the FAQPage schema this page creates





  
How it works
  1. Native accordionsEach question is a details element, so it opens and closes with no JavaScript and works with a keyboard and screen readers.
  2. Search every wordThe search keeps questions where every typed word appears in the question or answer, highlights the matches and opens the results when only a few are left.
  3. Schema for search enginesThe page builds FAQPage JSON-LD from the same list, so Google can show your questions directly in search results.

  
const words = query.toLowerCase().split(/\s+/).filter(Boolean);
const results = faqs.filter((f) =>
  words.every((w) => (f.q + " " + f.a).toLowerCase().includes(w)));

const schema = {
  "@context": "https://schema.org", "@type": "FAQPage",
  mainEntity: faqs.map((f) => ({ "@type": "Question", name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a } }))
};