Show/hide button

Hi all,

In the following page I created an element that will show/hide a video and some extra text. I want to switch the image of the “read more” button to “read less”. I did this now by putting 2 images on top of eachother and making the “read less” image visible on click. But, since I can’t figure out how to make the “read more” image invisble I have to make the read less button non-transparant so it completely overlays the read more image. Problem with this is that I get a white background which becomes visible on the white/light gray background of the website.

Does anyone knows how I can fix this?

url: http://www.theonlinecompany.com/showcase/laterembrandt/digitalcampaign-nl.html

You must be able to affect both images, passing one display block when switching the other to display none.

Can you please share your project’s public link so it’s easier to show you how?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link

Hi Vincent,

Thanks for looking into this, here’s the link: https://preview.webflow.com/preview/awardinzending-kpn-late-rembrandt?preview=15a7a782717cac51df7cfb9bd28d17de

So on your first interaction you add another click trigger that hides the element:

http://vincent.polenordstudio.fr/snap/3v1o4.jpg

And you make a second interaction, on the other element, that’s basically the same bu reverse: hides on click and affect another element, the one you’ve hidden, to show it back.

Maybe you didn’t figure that you could add as many triggers you want?

Hi Vincent,

Thanks alot for your support so far. I got a little bit further now. There’s something still not right: If I click the read less button the content scrolls up and the “read more” button becomes visible but the “read less” button itself does not disappear. Any ideas on that?

I have a new preview link. It’s on page “Digital Campaign NL”

https://preview.webflow.com/preview/awardinzending-kpn-la3010114?preview=04ea60b4b689a1696cba7463f38a299e

Thanks!

Hi @ferry,

on the interaction where the user clicks the read-less, make the Click trigger with 1 step to set read-less element to display none, the last trigger.

Then try that out :smile:

Cheers,
Dave

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.