On most projects I've worked, I've come across this requirement. FAQ, accordion, or drop-down, is a core component of almost every store.
I've seen it done wrong too many times. Hard to configure, heavy on performance, lack of accessibility, or unsemantic markup, these are just a few things that this widget is trying to solve.
Installation
To install the FAQ section, download the files from Github, copy faq.liquid to your theme sections, and faq.js to your theme assets files. After installation, add questions and answers via Theme Editor.
Styles
All the styles are included inline in faq.liquid. This section follows an atomic CSS structure similar to tailwindcss.com but you can modify the CSS as per your requirements.
FAQ Rich Schema
JSON-LD FAQ structured data is automatically added. Learn more about the benefits and FAQPage schema format.
Performant and accessible
The Javascript is small written in plain vanilla, not other libraries like jQuery are required. The FAQ uses Aria roles to ensure accessibility. The component is keyboard accessible.
Section settings
In Theme Editor you can configure colors and desired font sizes. It has just basic settings but this can be easily extended to suit your needs.