Help with dynamic interactions / nested siblings

Hi everybody. After completing a website design for a client they reached out to me to see if it was possible to have the biography of their team members show up on click. I’ve browsed through some tutorials on the forums and found some very helpful ones.

I followed the instructions and was able to get it to work. The problem, however, when "limit to nested siblings is not checked it pulls up all the biographies at the same time and when nested siblings is checked nothing happens.

Any suggestions?


Here is my public share link: https://preview.webflow.com/preview/hygea?preview=f4e42751dacfcb188dd6eb3e29471425
(http://hygea.webflow.io/)

A sibling is a “brother”, an element at the same level. At the moment you’ve defined your interaction on a link that is way down the hierarchy. The element that it targets is not a sibling of it but a parent of it.

When using limitation such as nested and sibling you need to think your structure to make the interaction work.

http://vincent.polenordstudio.fr/snap/fkn0d.jpg

As there is only 1 action on those team blocks, the easiest solution is to remove the interaction from the link and to affect it on the div that’s a sibling of the bio element. You can even make the link a text and wrap the div in a link block so that you have a nice link cursor and nobody is confused. You can also affect a link cursor the the div too…

Thank you so much, Vincent, I changed my hierarchy and it worked! :grin:

1 Like

@vincent I am running into the same issue here but have very little understanding of the hierarchy and how that all works.

What do I need to do to make it so that the interaction only happens on a single card versus all of them. I also need that to work across all tabs.

https://dr-test-ground.webflow.io/resources/find-a-provider