How do I hide or show a group depending on the value of the dropdown menu

[rcdcanlas]

I have 3 different forms and I put a dropdown menu at the top with choices form 1, form2, form3
I wish to show the different forms depending on the chosen value of the dropdown menu.

For example the defailt value is form 1 so form 1 will show but when I chose form 2 on the dropdown menu I would like to hide form1 on the same location but show form2.

How do I go about this? Thanks for the help

[adamhholmes]

Make sure all the forms are not visible on pageload, then put a conditional on each form to make it visible when the associated menu item is selected.

i.e. for form 1, have a conditional to show the form when the dropdown menu’s value is ‘form 1’.

[rcdcanlas]

This is my 2nd day using bubble.io
will you point me to a guide? or video>

[adamhholmes]

Sure, definitely start with Bubble’s own tutorials to get a good understanding of the basics, like showing and hiding elements.

Academy | Bubble

And the Bubble manual is also worth reading through to get to grips with the basic concepts.

[rcdcanlas]

@adamhholmes

s also worth reading thro

Hi, I found a video here about changing condition but its on a button. I cant figure out how to do that on dropdown. Will you be able to help me?

[mikeloc]

Hi there, @rcdcanlas… here’s a quick example for you. First, put your forms in groups and stack the groups on top of each other (they literally need to be touching each other). Make sure each group is not visible on page load and set to collapse when hidden.

Next, add a dropdown with the appropriate options (in this example, I am using static options, but you could consider using an option set).

Finally, add a condition to each group that makes the group visible when its associated option is selected in the dropdown.

Hope this helps you get down a good path.

Best…
Mike

[rcdcanlas]

I got the gist of the concept. However when I am setting up in conditions I cant see the options on my dropdown menu? what could possible be the reason?

[mikeloc]

If you are using static options, you won’t see them… you literally have to type them in exactly as they appear in the dropdown.

[rcdcanlas]

Thank you bud it worked!

But what if I have mutliple forms like 12? Do I have to stack them, I think it will be so long.
I am thinking of adding 12 forms. Is there a different way? Like stack them together in one place?

[rpetribu]

You can build them one above the other…

Try to make the form groups the same width so you will have less problem when working with responsiveness. Make 2. See their behavior in the “responive tab”, make 3, 4, 5… and keep checking and adjusting the behavior in the “responsive tab”…

[rcdcanlas]

Thank you so much for the help guys! I managed to do it