How can I create a FAQ like the one shown in the video using Webflow? Additionally, what should I set the link setting to for a button in a FAQ? I removed the page link and now the button is unclickable.
TL;DR
- Build the FAQ with a container div, question text, optional button, and a hidden answer div.
- Add a click interaction to toggle the answer div’s visibility, and use "#" or non-link elements to keep buttons clickable without navigating.
To create an accordion-style FAQ in Webflow and ensure buttons are clickable, you need to structure your elements with interactions and proper link settings.
1. Build the FAQ Structure
- Add a Div Block to serve as the container.
- Inside the container, for each FAQ item, add:
- A Text Element (e.g., Heading or Paragraph) for the question.
- A Button or Link Block if desired (optional, depending on design).
- A Div Block or Text Block for the answer content (hidden by default).
2. Style the FAQ Elements
- Set the answer’s Div Display to None (under Layout in the Style panel).
- Include padding, borders, or icons to style the FAQ section as needed.
- Add an interaction trigger (see below) to animate the accordion.
3. Add Interactions for Toggle Behavior
- Select the Question or Button, go to the Interactions panel.
- Choose Mouse Click (Tap) as the trigger.
- Add a Hide/Show action:
- First click: Set the answer Div to Display: Block and maybe animate height or opacity.
- Second click: Set it back to Display: None.
This creates a toggle behavior to open and close each answer.
4. Set the Correct Button Link
- If your button becomes unclickable, it’s likely because you removed the link destination.
- In a FAQ, if the button is only meant to trigger a toggle and not navigate, do one of the following:
- Use a Div Block or Button element with click interactions instead of a Link Block.
- If using a Link Block or Link Button, set the link to "#" (hash symbol) in the link settings to keep it active without navigating.
5. Optional: Use Webflow CMS for FAQs
- Create a FAQ Collection with fields for question and answer.
- Add a Collection List to the page and style it as above.
- Apply the same interaction to each collection item for dynamic FAQs.
Summary
To create a FAQ in Webflow:
- Use a toggle interaction on a button or text element to show/hide answers.
- For buttons that shouldn’t navigate, set the link to "#" or use a non-link element with an interaction trigger to ensure it's clickable.
