Accessible FAQ Accordion
CMS-ready, and built for Webflow.
Each question is a button that toggles its answer open or closed. Opening one automatically closes any other open item. The first is open by default. It uses custom CSS in the <head> and JS before the closing </body> tag in the page settings.
Yes. The component uses aria-expanded and aria-controls so screen readers correctly announce the state of each item. The trigger is a <button> element, so keyboard navigation works out of the box.
Yes, the CMS structure is set up to reflect Webflow's native Collection List structure.
As little as possible. Transitions, icon rotation, and open state are all handled with CSS classes. The JS only handles what CSS can't — height animation and ARIA attribute updates.
The first FAQ item has a combo class of .is-open applied to it in the Webflow designer. To change the default open item, remove .is-open from the first item and add it to whichever item you want open instead. If you want all items closed on load, just remove .is-open entirely.
Yes. All answers are present in the HTML on page load. Search engines can crawl and index the content regardless of whether it is expanded or collapsed.
Webflow's Collection Lists output plain <div> elements rather than a native HTML list. Screen readers rely on list semantics to understand grouped content, so role="list" and role="listitem" are applied manually via custom attributes in the designer to fill that gap.