Targeting several elements per trigger in Interaction

Community resources Product feedback
1

Hi, could it be possible to apply more than one interactions to the same element?

I know this might be achieved with tabs, but is there a way via interactions to affect two different elements with one trigger? I want to use a button or menu item to make one div or section dissapear and another one be shown instead, at the same time. I have a whole structure already created, so before I adapt it into tabs, I want to know if this could be done with interactions, but I think it’s not possible. And also, this might be triggered by two different elements (a button and a menu item, maybe), and I cannot do that with tabs. A section should be shown on load, and another one hidden, and with one click that status should change.

The idea of this is to be able to create for example a one-pager site, where instead of being a scroller, I could display different sections in the same place. That’s tabs, I know, but maybe affecting two elements or more with different interactions and with one trigger could be desirable for other situations.

Thanks for any input!

1 Like
2

Hi @davidvm, at the moment, it is not possible to trigger two different elements using the Interactions from a single trigger, so to do that, you would need to use some jQuery until we add this capability into Webflow. Cheers.

3

Any updates on this one?

Is this capability of working with multiple elements from a single trigger planned in Webflow?

5

Any news on this one, @cyberdave ?

6

maybe I don’t understand the question… but you can do this in webflow.

you want
(onLoad):div-1.visible = true and (onLoad):div-2.vislble = false

and on the click of an element`… you want the opposite states for the above mentioned divs ?

ie: link.onClick
(set) div-1.visible = false;
(set) div-2.visible = true;

then… another link.onClick
(set) div-1.visible = true;
(set) div-2.visible = false;

like a toggle.

8

How can you do this in Webflow without custom code?

9

interactions have an option to affect “other elements”.

If checked… event happening to a specific can create an effect on another element.

For example:
Mouse over a specific link, makes a div at the top of screen visible.
Mouse off the link… div hides.

10

Just tried it. Had no idea this is possible without writing custom code. Thanks @Revolution!

11

Hi @bogdan, sorry if I misunderstood your original question and thanks @Revolution for helping :slight_smile: Yes, you can use multiple triggers in an interaction and on each trigger, affect a different element.

Targeting multiple classes using the same trigger is not yet supported, but you can create multiple triggers in an interaction, with each trigger targeting a separate element by class name.

2 Likes
12

will it ever be possible to effect several elements with the same trigger? to be honest in this way if i want to highlight for example 1 out of 12 dives each time i need to add 12 triggers to an interaction and its very messy

1 Like
13

Hi @cyberdave, I am currently trying to apply a set click-trigger interaction to different elements of the same class.

For example, to achieve an effect similar to that of the “Core Values” section when you scroll to the bottom of this website or the FAQ on this website. Clicking on each headline reveals additional text.

I have created that very interaction and applied it to all the headlines on my FAQ page - but it only works on one single headline (the first one). All the headline elements have the same class, as do all the text elements.

Do I have to individually recreate the same interaction for each headline/text combo?

cc’ing: @Sebasgaes as I believe he is working on something similar and your response would interest him as well.

Thanks!

1 Like
14

Did you were able to recreate it? I could not :confused:

15

Bump - This would be awesome if we had this in webflow. Any news on it? Interactions 2.0 maybe?