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 using div blocks for each question-answer pair, hiding answers by default and adding toggle buttons or interactions to reveal them.
- Fix unclickable buttons by assigning a valid link target (e.g.,
#, page, section, URL, etc.) so they remain interactive.
To create a FAQ section like in the video using Webflow and fix your unclickable button, follow the steps below carefully.
1. Create the FAQ Structure
- Use a rich text section or repeater structure with toggles to display FAQs.
- For each FAQ item:
- Add a div block (e.g.,
.faq-item) as a container. - Inside it, add:
- A Text Block or Heading for the question.
- A Button or Link Block to allow interaction (toggle or link).
- A Text Block or Paragraph for the answer (initially hidden using display: none or height: 0).
2. Add Toggle Interaction (Optional for Expanding Answers)
- Select the question header or toggle button.
- Go to the Interactions panel.
- Create a Mouse Click (Tap) trigger.
- Add animation steps to:
- Show/hide the answer block using display or height transition.
- Rotate an icon (optional for visual effect).
3. Fix the Unclickable Button
If your button became unclickable after removing its link:
- Select the button element.
- Go to the Element settings panel (gear icon).
- Under Link settings, choose an appropriate link type:
- Page — if you want to link to another page.
- Section — if you want to scroll to another section on the same page.
- URL — for external links.
- Email or Phone — for contact actions.
- Or set a # as a placeholder if it’s not meant to navigate but just handle interactions (like toggling visibility).
Important: A button without a destination becomes non-interactive in most browsers.
4. Style the FAQ Section
- Add spacing and styling to the
.faq-itemdiv block. - Use transitions (e.g., easing, duration) to make toggling answers smoother.
- Add an arrow icon and rotate it based on toggle state using interaction.
Summary
To build a FAQ in Webflow: use a toggleable layout with a div block for each question-answer pair, apply interactions for expand/collapse behavior, and ensure your button uses a link target like # or a real destination to stay clickable.