Reusing Interactions limitation?

I’ve set up a test site for my situation: https://preview.webflow.com/preview/interaction-test-f27e23?preview=f7e309739a52d77d20e60133441472f6

On Tab 1, I’ve added a collection list. When clicking on the link box that contains a phone icon, the click interaction triggers the phone number to appear in a box below it (opacity 0-100%). Second click removes the box (opacity 100-0%).

I’m able to click on each link box trigger to reveal the respective phone number.

image-1

I copied/pasted the collection to Tab 2, and the interactions don’t work the same way. I’ve played around with affecting the class instead of the element for the action (all, children), but no dice.

One hack was to create a duplicate interaction for each tab, but then I’d have 30+ duplicate interactions for different pages.

Hi @olavers, I would change the structure a bit, so that the element triggering the animation is based on a class instead of selected element, and change the interaction to apply to the class and only to sibling elements.

I made a quick video:

https://cl.ly/0g0F02271u0I/Screen%20Recording%202018-05-15%20at%2006.22%20AM.mov

I hope this helps

Thanks @cyberdave! Your video helped me to understand the sibling/child relationship, and I got it to work after some restructuring.

1 Like