Drop down/Select Triggered Section

Community resources
1

Just wondering if Webflow can replicate this Select/Dropdown triggered elements/section?

, where if you select an option, a form will appear/disappear

ive been struggling on this for days using Webflow’s native Hide/Show Interactions, which you can see it here: contact-us

help would be very much appreciate. Thank you

2

Interactions are one approach. Register a click event on each dropdown item which hides all of the forms and then shows only the relevant one.

A cleaner way might be JS. I’d probably build it like this;

  • Put the forms inside of a tabs element, one per tab
  • Give each tab an ID or a custom attribute identifier
  • CSS hide the tabstrip, display: none
  • Add a custom attribute to each of your dropdown items, with that tab identifier
  • JS click event, take the clicked element’s identifier, locates that tab, clicks it.

This approach is a bit easier in case you need to add new forms, or edit them; you just need to remember to select the tabs element and change the tab.

Make certain to initialize the starting state, i.e. which form is showing by default. If you want nothing to show, make a blank tab, and make that the default one.

1 Like