Let's go ahead and toggle a fade,
a fade effect, and a display effects.
So we need to do two different things here.
Before anything, we need some sort of event listener.
Click Me, and it's just a simple button.
So let's go ahead and register this button as a click event.
Button.
Dot on click function.
And that's how we register the click event listener.
Then we need to select that box.
And we can do toggle.
And we can do fade toggle.
And this is either going to fade in or fade out depending on how visible it is.
So let's go ahead and give this a shot.
When we click this, fades in,
fades out just like that.
And we can see here there's a style attribute and watch it.
When I click this, it's going to fade out.
And it changes the opacity down to 0,
and then it changes the display to none.
And when it fades back in,
it changes the UPC.
It scrolls that backup to one or a 100% and
makes it display block or actually just gets rid of the display property altogether.
We can see it's display none.
And it's going to be whatever I told it to be before.
So if it's inline-block,
it's going to be inline-block.
If it's displayed block or flexbox,
it's going to be flexbox,
it's going to be whatever we set it to be in CSS.
So we can fade toggle.
The other thing we can do is simply toggle.
This is going to toggle it to display or to not display.
So simply, just like that, That's all we're doing.
We're clicking it. And every time we click it,
it either makes it visible or makes it invisible.
That's all it's doing.
Just as a recap, toggle is going to basically use hide and show.
Whereas fade toggle is going to use fade in and fade out. Go ahead and give that a shot.
Try fade toggle and try regular toggle.
These are going to be useful when you create interactive websites for people.
When someone clicks something,
does it become visible? If they click out of it?
Does it become not visible like a menu system,
like a drop-down menu system.
When you click the little icon that
suggests that you could have a menu and it drops down.
Maybe you want to toggle.
So there are, there are lot of different ways in which we would use this.
No, honestly fade in and fade out is not used too often anymore.
Just because it looks a little bit cheesy, but, you know,
maybe a couple of years from now that the whole web,
the whole internet decides fading in and fading
out is a thing that we wanted to do again.
In the next lesson, let's go ahead and talk about sliding
up and sliding down as another form of animation.