How to trigger multiple elements with one element?

Design help Animations & Interactions
1

Hey team,

Having a slight trouble with creating a hide/show interaction on the our “TEMP” page. The link to the read only site is here…

https://preview.webflow.com/preview/gruner-skrein?preview=71d03eedb7af3cb52b55eaa7df4dc091

Ideally what should happen is when clicking on image 1 - image one text appears and when clicking on image two - image one text disappears and image 2 text appears in the same place. I managed to get the functionality to work, however I now need to click twice on image one to show image 1 text again. Trying to figure out how I can get this functionality with a single click.

TEMP%20Page
TEMP%20Page2149×1277 91 KB

I am sure its a small detail that I am missing and surely this is possible.
Any help much appreciated! :smiley:

2

Hi,

Yep I understand what you’re trying to do. I have an example you can see with this interaction:

https://preview.webflow.com/preview/gj-project-1?preview=53ee36f634ce054846fb517f2ba2f891

These three buttons have the same issue. To solve this, you’ll need to:

  1. Add 1 Div - Set to relative
  2. Add 2 Buttons inside - Set to block so they stack on each other

These 2 buttons will need the same interaction you have, or what I have on the example page. But the problem is this effect you’re after can only use “a button with 1st Click only”.

A second button will need to appear after top button disappears. This second button will again only use 1st click as well. But it needs to show after the first button hides. Then you can get the effect.

Section One (with 2 buttons)
    Button 1:  Shows content 1, hides content 2
    Button 2: Hides content 2, shows content 1

Section Two (with 2 buttons)
    Button 3: Hides content 1, shows content 2
    Button 4: Shows content 2 hides content 1

I hope this makes sense, it’s kind of hard to explain. Basically, Button 1 shows content 1, but you’ll have Button 2 showing content 2. The problem happens because Button 1 also hides content 2. Button 2 hides content 1.

So Button 1 can only have a 1st Click interaction! And if you add a 2nd Click to it, there’s no way to separate the multiple actions in the panel. WF uses it as one interaction but can’t divide elements in the panel, they’ll all be a part of 2nd Click! Giving you that pause effect your experiencing.

To bypass this, you’ll need a Button 2 under Button 1. But both will have a “1st Click Only”! Then the effect is possible. Because Button 1 can show content 1 and hide content 2, and disappear.

Button 2 will show but you haven’t clicked it, because you will have already moved on to the other section. But when you go back to section 1, you’ll be using the Button 2, so it will have a 1st Click still available. It can hide content 2 and show content 1!

:mage:

I hope this helps. If you get stuck just shoot me a message and I’ll help ya out.

1 Like
3

Hey mate!

Thanks a lot for the massive reply, just tried it out and it worked like a charm. However due to us having 6-8 images with descriptive text it may become a bit messy so we are opting for a simpler hover = reveal text in order to save some time.

Thanks again for your input!

4

Awesome, glad I could help! Oh if you’re going to use a hover then I have an example that you can copy if you like. It does take some organization but it works for hovers when you need to “hold/keep active”. The native hover effect doesn’t have an active state, yet there’s a work-around on my collection page. Check it out, it may work for you. (Click “Open Menu”)

http://gj-project-backup.webflow.io/