#Need tags attached to form 1 to hide -> when clicking on form 2

9 messages · Page 1 of 1 (latest)

peak garden
#

-> Need a section on a component to hide when i click on another component.

I'm doing a page with a given amount of forms (amount of forms is dependent on members selected on previous page, so it can vary), each form serves to assign a value to a member - when the form is clicked 3 small buttons with value suggestions show up under the form .
When a button with a value is clicked the value is applied to the form.

When this operation is finished the user should move on to the next form on the list and repeat the process - but at any given time only one form should have the tags open (the one selected). How could i do this, is it possible with variables to control one instance of a component from another instance?

The form is prototyped with the different states (default, focused, typing with the tags showing and filled)

hoary haven
#

If it is more like an accordion, then i think it is still somewhat along this line where you need a variable to keep track of which one should be open (similarly to how the tabs change from which one is active)

#

If you would like to share an image of your setup for more context, that might help also! If you dont have the option, get verified in #verification ! That should help 🙂

peak garden
#

Thank you! I will see if that's it 🙂 So these are examples of the interaction that should happen: changing to screen 2 when the form below is clicked, hiding the button section of the form that was just filled and opening the other

image.png
hoary haven
#

I see! So there are probably multiple ways to do this (in the tabs one you can also see that we made it with like 3 or 4 different ways each with its own cons and pros list).

Similarly to that, this one would have about the same options. However since for you the # of fields is not fixed, I think one of the options would be much better than the other ones.

I think your best bet is to have the same amount of variables as you have input fields (or I guess the max amount of input field possible). Eg. input-1, input-2, input-3, etc. Where input-1 is "focuesed" and all the other ones are "default". Then on your page you can have eg these 3 form fields. And then connect the first one to the input-1 variable, the second one to the input-2 variable and so on

#

After that you would need to add an interaction maybe on each of the buttons of the first one that is like "on click, set the input text to this (to be the saem as the button), and then set input-1 to default and input-2 to focus

#

And yyou would have to repeat this on all of them, so this will be a lot of manual work, but i dont think there is an easy way around this

#

there are some other options like you can make it into a component set where each component has 3 of the fields in it, and they differ in which one is filled / focused, and each of the component is called 1, 2, 3, (depending on which field is open). and have only one variable that is a counter, and it would just display the component that is the same as the counter. And then within the component set counter to counter + 1 when a button is clicked. It is possibly less different actions that you need to make, but it will have some extra problem of displaying the correct number of fields. + if the text that shows up in the input field based on the button that is clicked is done with variables as well, then this wouldn't work as you can't connect variables to nested instances