How to Create a FAQ Accordion in Webflow Without a Library

In this tutorial, Sandro, cofounder of Gemeos Agency, a Webflow agency, shows you how to build a FAQ accordion in Webflow without an external library, using only native interactions.

Example

1. Build the accordion structure

For each FAQ item, create a Div containing: a question Div (clickable) and an answer Div (hidden by default with display: none). Add a "+" icon or an arrow inside the question Div.

2. Add the interaction to the question Div

Select the question Div. In the Interactions panel, create a Mouse click (tap) trigger. Action: show/hide the answer Div with a height or display transition. Use the Toggle option to open and close on click.

3. Handle the rotating icon

Add a second action in the same interaction to rotate the arrow icon: Rotate 0° → 180° on click, with Toggle. This gives a clear visual cue for the open/closed state.

4. Close the other items automatically (optional)

To automatically close the other items when one opens, add a "Combo class" interaction or use this lightweight script:

document.querySelectorAll('.faq-question').forEach(function(q) {
  q.addEventListener('click', function() {
    const answer = q.nextElementSibling;
    document.querySelectorAll('.faq-answer').forEach(function(a) {
      if (a !== answer) a.style.display = 'none';
    });
    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
  });
});

Conclusion

A FAQ accordion improves readability and SEO. Use cases:

• FAQ pages for brochure websites or SaaS products
• Q&A section on a landing page
• Documentation with collapsible sections