How can I use Webflow to show/hide divs based on a user's selection in a form?
TL;DR
- Create a form element and uniquely identify each target div.
- Use interactions like "Form Change" to trigger animations that show or hide divs based on the user's selection.
- For dropdowns with multiple dynamic options, embed custom JavaScript to toggle div visibility.
- For limited fixed choices, use on-click interactions to show/hide divs without code.
You can show or hide divs in Webflow based on a user's selection in a form by using Webflow’s built-in interactions and form element triggers like dropdowns, checkboxes, or radio buttons.
1. Prepare Your Elements
- Create your form element (e.g., a Select dropdown or set of Radio Buttons).
- Create several div blocks that will be shown or hidden depending on the user's selection.
- Give each div a unique ID or class to easily target it later.
2. Add Conditional Visibility Using Interactions
- Select the form element (e.g., the dropdown).
- In the Interactions panel (Lightning icon), click + New Trigger and choose "Mouse Click (Tap)" for basic custom toggles, or "Form Change" for dropdowns or radios.
- Set the trigger type to "Change" if you're using a Dropdown, Radio Button, or Checkbox.
- Under "Actions", choose "Start an Animation", and click + Timed Animation.
3. Create an Animation to Show/Hide Divs
- Name your interaction (e.g., “Show Div A”).
- Click + Add Action, select the target div, and set its initial state to Display: None / Opacity: 0 (if hidden initially).
- Add another step to set Display: Block / Opacity: 100% to show it when triggered.
- Repeat this for other selections, creating unique animations for each choice.
4. Fine-Tune Using Multiple Interactions
- If you're using a dropdown:
- Add a Form Change trigger on the dropdown.
- For each option, you’ll need custom JavaScript since Webflow does not natively allow conditionals with form selections. Use an Embed element to insert a small script.
- Example logic: Use
document.querySelector('select').addEventListener('change', function() { ... });to toggledisplayCSS styles on the matching divs.
5. Use a Simplified No-Code Option (Only for Limited Cases)
If there are only 2-3 fixed options, you can:
- Set each option (radio or toggle button) with an on-click interaction that shows/hides specific divs.
- Example:
- Click on Option A → Show Div A, Hide Div B and Div C.
- Click on Option B → Show Div B, Hide Div A and Div C.
Summary
To show/hide divs based on form selections in Webflow, use interactions triggered by Element Change or custom JavaScript for dynamic dropdown logic. For simpler cases, use on-click interactions to toggle visibility among a few preset divs.