Streaming live at 10am (PST)

Problem with second click trigger

#1

Hi,

I’m using Click Trigger on my Elements to Show/Hide Content within the tiles. So if I click for example “Fotografie” 1st it will show some content. When I make the 2nd click it will hide my content.

The problem is, when I just make the 1st click and then click on another element. When I go back to “Fotografie” I first have to make the second click to fullfill this action and then have to click again to show the content again.

Does anybody know how to solve this problems? Thanks in advance!


Here is my public share link: https://preview.webflow.com/preview/gruppe-e?utm_source=gruppe-e&preview=79d34f641642d6a93f596fefa0e08a86

https://gruppe-e.webflow.io/

0 Likes

#2

Interesting problem! It always boils down to your structure. Also to achieve something like this you should rely on targeting classes rather than elements.

OK, so you have a task of, say, showing all the photos while clicking on the “photo” button. The solution to the problem of the second click is to have all those images disappear again when you click any other button (this way photos are “re-initialized” and are back at where you need them (they should be hidden), for the first click on the “photo” button to do something).

Currently you are doing the first click action the hard way, manually selecting each and every photo on the page, make it to appear, increasing opacity. This is inefficient.

  • Give each of your photo links same class (they will become the same so remove the background image, which will be inserted differently in step two)

  • Insert divs with different photo backgrounds inside these links (those with the same class)

  • Now create an interaction where on first click you target the photolinks class rather than every single element with the photo. Make this class appear as you need and disappear on second click. You will need to add something else to this interaction but to make things more clear you will do it later.

  • Now do the same for other buttons but add one simple thing to the “first click” interaction - add disappearing of the photo links class into this first action! This way when you click other buttons the first click will remove the photos while revealing other necessary elements.

  • And last add the same disappearing of other elements that appear on click for other buttons (elements like “interview” and “data”, that should be organized the same as photo links - same class for each with different content divs inside), to the photo button’s “first click” interaction

This was a lot of text but hopefully you’ve got the gist of the idea and will be able to work from here.

Let me know how it went!

0 Likes