Show & hide elements on click

Lesson info

Lesson info

Behold the ultimate and oft-overlooked trigger: the mouse click (A.K.A. "the tap"). We'll turn a div block into a trigger, which, upon being clicked, shows (and later hides!) the lyrics to a song. We'll not only cover the show/hide effect—we'll even go into animating the entrance and exit.

Open this project in Webflow

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

In this project, we'll be creating interactions which animate to show and hide the lyrics to a song. What's the song? It's not important. Let's move on.

Everything starts here. This is our trigger. This div block. And by the way, you can create interaction triggers using almost anything out there — some examples might include a paragraph, a button, a section, Idris Elba, a whole page, a heading...

Let's start by configuring our trigger. (We’ll do this from the beginning so we can set everything up from scratch.) We'll select this div block, and go over to interactions. Now we want the element to be the trigger, so let's click in and specify. (We want the mouse click to serve this function.)

And we’re going to create two animations for this one: Show...and Hide. This one we’ll name Show. So let’s select this div bock — which contains all our lyrics. Notice for a second that the timeline is still visible to the right. (Even though we’ve now selected a separate element — a different element than the trigger — we’re still affecting what happens when we click the trigger.)

Let’s set our initial state. And since we want this entire div block and its children to not show up when we first load the page, we’ll set our initial state to display: none. That’s going to be our initial state.

So all we have to do to show it? We’ll add one more action. We can add this right in the timeline. Same idea here, but we’ll make our display setting whatever the original value was. Maybe it was block or flex — in this case it’s block. And that’s it for Show.

Let’s do hide. And we’ll go back out to the trigger, and on the second click, we want to do a different timed animation. This time, we’ll create one called Hide.

We don’t need an initial state here. In fact, all we need is a single action. We’ll go in, and we’ll make sure to switch back to display: none. If we go to Preview? We can now press Show Lyrics repeatedly to show and hide the lyrics.

Now what about that text? Well, it’s the same kind of principle here. We can have a second element — additional text — maybe this can say Hide Lyrics. And its initial state — when we’re using our trigger, back on the first click — we can do the same thing. We can create an action which initially hides the text element we have selected. (Let’s make sure to set this as the initial state.)

And we’ll click in the timeline to add its second action (where it goes from the initial state). And we’ll make that visible.

This’ll work fine as-is, but we also want to hide the other text. We don’t have to set an initial state on this one since it’s already visible. But we do want to hide it on click. We want to make sure its display setting is set to none.

And for our second click? We’ll want to go back to the trigger — this way we can configure what happens in our Hide animation. When we click hide, we actually want the text that says Hide Lyrics to disappear. So, we’ll make sure that action sets our display setting to none. And since our first click hid the text that says Show Lyrics, we’ll want to make sure clicking this a second time actually brings Show Lyrics back so its visible again. (At this point, let’s click and drag to make sure this is all occurring at the same time: the 0-second mark.)

If we preview? We have exactly what we were looking for. Clicking the trigger shows and hides the lyrics — our div block containing those lyrics. And the text in our trigger swaps out as well.

Now this is the basic functionality. We can, of course, animate on top of this. For instance, what if, when we click this trigger, we want the div block to fade in? To go from 0% opacity to 100% opacity? Well, we can select our div block, which (of course) has its initial state set to display: none. And we can add another action which sets its opacity to 0%. (All the way down to 0.) Make sure this is the initial state.

Create a new keyframe — another action here to control opacity. And this time, we can set it to anything, but we’ll make sure it’s all the way up to 100. Hit play? It fades right in.

Let’s go back to the trigger — the mouse click (or tap) controls for our trigger. And on our second click, we can go into our Hide animation and configure our div block to fade out. Make sure the div block containing the lyrics is selected, and we’ll create an action which drops the opacity of our div block all the way down to 0.

In our timeline, we’ll want to make sure this happens before we set our display setting to none. Once we’re there, let’s hit Preview. And we’re now fading in and fading out on click.

Now wait a second. If we’re controlling opacity, do we really need to change our display setting? It depends on what you’re trying to achieve. In this case, it’s not affecting our design. Remember that display: none won’t just make the element disappear; it’ll yank it from the normal document flow. (Opacity makes something translucent or transparent, but display: none pulls the element and its children completely out of the document, so depending on your design, keep that in mind.)

Here we’ve tweaked our animation and added a move transform to the actual paragraph using the same principles we covered with opacity. And we tweaked our easing to smooth everything out. You can dig into this example project and take a look, play around with it, change it up to get really familiar — total awareness — with this kind of interaction.

But that’s...how to show and hide (and even fully animate) ...on click.