How can I use Webflow to show/hide divs based on a user's selection in a form?

To show or hide divs based on a user's form selection in Webflow, you can use native Webflow interactions combined with form elements like checkboxes, dropdowns, or radio buttons.

1. Use Form Elements as Triggers

• Add a Radio Button, Dropdown, or Checkbox inside a form or anywhere on your page.
• Give each input a unique Class or ID to target later.
• For radio buttons or checkboxes, make sure they are grouped properly to allow selection behavior.

2. Create the Divs to Show/Hide

• Add one or more Div Blocks on the page.
• For each div, assign a unique Class name or ID, such as div-option-1, div-option-2, etc.
• Style them as Hidden initially (e.g., set Display: None in the Style Panel).

3. Use Webflow Interactions

• Select the form element that will act as a trigger.
• Open the Interactions panel (right-side lightning icon).
• Click + next to Element Trigger, and choose one of the following based on the form type:
• Mouse Click (Tap) — for checkboxes or radio buttons.
• Change — for dropdowns or select fields.

4. Add Actions to Show/Hide the Divs

• In the interaction, add a Hide/Show action.
• Set one div to "Display: Flex/Grid/Block" depending on layout needs.
• Set the other divs to "Display: None" to ensure only one is visible at a time.
• Use "Only affects children with this class" if necessary.

5. Optional: Use Custom JavaScript for Complex Logic

Webflow interactions can be limited if you need more advanced conditional logic. In that case:

• Add custom JavaScript inside Page Settings > Before tag to dynamically show/hide divs based on selected inputs.
• For example, use document.querySelector to detect selection and use .style.display = 'none' / 'block' to toggle divs.
• However, this method requires comfort with JS and is not native to Webflow Designer.

Summary

To dynamically show or hide divs in Webflow based on a form selection, use interactions tied to form inputs like radio buttons or dropdowns. Assign unique classes to the inputs and divs, hide divs by default, and then use Show/Hide actions in the Interactions panel to display the correct content based on the user’s choice. Use custom code only when conditional logic is too complex for Webflow's built-in interactions.