How can I create a "FAQ like" page in Webflow with multiple accordion menus that close when another is clicked? I understand that I need to set the interactions for siblings, child, parents of the class, but I'm unsure which family member is responsible. Thank you for any tips!

TL;DR

Build an accordion structure with a wrapper containing items, each with a trigger and content block.
Assign clear classes (e.g., Accordion Item, Accordion Trigger, Accordion Content) for targeting.
Set a click interaction on the trigger to hide sibling content blocks by targeting each sibling's Accordion Content class, then open the clicked item's content.
Optionally, add a second click action to close the open item by reversing the animation.

To create a FAQ-style accordion in Webflow that allows only one item to be open at a time (the others collapse automatically), you need to use Webflow Interactions 2.0 with the correct element targeting based on sibling relationships.

1. Set Up Your Accordion Structure

Create a Parent Wrapper (e.g., Accordion Wrapper) that contains all individual accordion items.
Inside it, each Accordion Item should contain:
A Trigger element (e.g., a Heading or Div Block) used to open/close the item.
A Content element (e.g., a Rich Text, Paragraph, or Div Block) that holds the answer.

2. Assign Classes Clearly

Give each Accordion Item a class like Accordion Item.
Give the trigger a class like Accordion Trigger.
Give the content a class like Accordion Content.

3. Apply the Interaction

Select the Accordion Trigger element.
Go to Interactions Panel > Element Trigger > Mouse Click (Tap).
Choose "On first click" > Start an animation > Choose New Timed Animation (e.g., Open Accordion).

Create the following actions:

Close all other content blocks:
Add a Hide/Collapse interaction targeting the Accordion Content of siblings of the currently clicked item.
Set display to none and height to 0px (or collapse via height animation).
Apply "affect siblings with class" Accordion Content.

Open current content block:
Select the child content block of the clicked trigger.
Set display to block, transition height to auto (or a known value like 150px).
Use "affect class" limited to children of the clicked element.

4. Optional Second Click (Close Current)

Add the second click animation to close the currently open item:
Target its child Accordion Content.
Reverse the height animation and/or set display to none.

5. Use “Only Siblings With This Class” Carefully

On the hide step, make sure to apply the interaction to:
Affect: Siblings
Class: Accordion Content
Limit to nested elements under same parent if needed.

Summary

To make only one accordion item open at a time, use interactions targeting siblings with the same class. Your trigger should close all sibling Accordion Content elements (siblings of the trigger's parent) before opening its own child content block. Proper nesting and class assignment are essential for this to work smoothly.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer