Show/hide elements based on form select

Design help Animations & Interactions
1

Hi,

How can I get divs to show/hide based on a user’s selection in a form?

ie. in this mockup example I want to show/hide the choices 1 or choices 2 divs based on the author they select: https://preview.webflow.com/preview/form-select-83d774?utm_source=form-select-83d774&preview=81e26fe74d3a410417b50ebf9deca092

Thanks!

1 Like
2

anyone able to help?

3

No way (yet) beside by custom code (You find a lot of code ideas to solve this). Do you know a little JS?

One example:
codepen:

$(function() {
  $('#colorselector').change(function(){
    $('.colors').hide();
    $('#' + $(this).val()).show();
  });
});

More:
https://www.tutorialrepublic.com/faq/show-hide-divs-based-on-dropdown-selection-in-jquery.php

The code idea ± is: set deafult value => show this deafult value. Hide all other options. Than when select option 2 (Hide all - and show 2).

1 Like
4

Thanks I will give this a go!

5

Are there any solution nowadays?
Working my *** off to pull this trought :frowning:

1 Like
6

No. Only by Custom Code.

7

I have used the above script and seem it displays the option selected but it does hide when selecting other option
here are the link and script
https://preview.webflow.com/preview/banner-8c8b15?utm_medium=preview_link&utm_source=dashboard&utm_content=banner-8c8b15&preview=247e6d5f980ea80a7c87d164260d1227&mode=preview

8

can you reshare a working link?

9

can you please reshare a working link

1 Like