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 a consistent accordion structure with a trigger and collapsible content inside a wrapper, all nested within a shared parent div.
- Apply click interactions on the trigger that first hide all accordion contents using class-based targeting, then reveal the clicked item’s content using child targeting.
To create a FAQ page with accordion menus in Webflow, where only one accordion opens at a time, you need to use interactions that target sibling or parent elements properly. The key is understanding how Webflow defines these relationships within your accordion structure.
1. Design Your Accordion Structure
- Create a div block for each FAQ item (e.g., “Accordion Wrapper”).
- Inside it, place:
- A toggle button or heading (e.g., “Question”) as the trigger.
- A content div (e.g., “Answer”) that expands/contracts.
Example hierarchy for each item:
- Accordion Wrapper
- Accordion Trigger (e.g., H3 or button)
- Accordion Content (e.g., paragraph inside a div)
2. Set Relevant Classes
Apply and name classes clearly:
- accordion-wrapper (for each FAQ item container)
- accordion-trigger (for the clickable heading)
- accordion-content (for the collapsible text area)
Keep structure repetitive and consistent to allow interaction targeting.
3. Create an Interaction on the Trigger
- Select an accordion-trigger, then go to Interactions → Element Trigger → Mouse Click (Tap).
- Choose "Start an Animation → New Timed Animation".
In this animation:
- Step 1 – Close All Other Contents:
- Add a “Hide other contents” action.
- Use “Affect → Class → accordion-content” with “Limit to siblings” unchecked.
- Set height or opacity to 0 (depending on your animation style), or set Display to None.
- Step 2 – Reset Other Trigger Icons (Optional):
- If you're using icons (e.g., arrows), rotate them back via a class-based animation.
4. Open Targeted Accordion Content
- Add another action in the same click interaction:
- Affect → Only children with class accordion-content.
- This avoids affecting other items.
- Set height, opacity, or Display (e.g., set to Block and expand height).
- Add a rotation or style change to the associated trigger icon (optional).
5. Wrap All FAQ Items in a Common Parent
- Add a FAQ Section Wrapper (e.g., a div with class "faq-list") that contains all accordion-wrapper items.
- This ensures Webflow can “see” all accordion wrappers together, letting the interaction target all of them.
6. Set Interaction to Affect Siblings or Parents Properly
There’s no "accordion" component in Webflow, so to make sure clicking one closes others, your interaction should:
- Affect other elements with the same class, not just siblings or children.
- When in interactions panel, choose Class targeting (not just “Only siblings” or “Only children”), and use “All elements with this class”, or for more control, “Limit to nested” if they share a parent wrapper.
Summary
To build a working FAQ with exclusive accordion opening in Webflow:
- Wrap your accordion items in a shared parent div.
- Structure them with clearly named nested elements.
- Set a click interaction on the trigger that:
- Closes all other contents via class-based targeting.
- Opens the clicked item’s content using child targeting.
- Control display and animation using timed animations and height/opacity/display settings.
This ensures that only one accordion is open at a time, using correct references to class-based and sibling/child relationships.