In the last lesson, we created some sort of box and we gave it a width of a 100%.
In this one, we just have a perfect square.
And what we want to do is toggled blue.
So we want to, every time we click this button, get rid of the blue,
and then click it again and turn it blue and click it in and just toggle it on and off.
And so we can do that by,
first of all, creating a click event.
So we want to select the toggle blue class.
And that's just right up here.
We want to talk all. We want to select that button,
dot on click function.
And because we actually don't need the this keyword,
we can do arrow function.
Then we can simply say the box which we've selected up here,
toggle class blue, and that's it.
And so if jQuery recognizes that there's already a blue class,
it's going to take it off.
And if it recognizes that there is not a blue class, it's going to add it.
And so let's go ahead and give this a shot, refresh our page,
and watch this down here where it says blue bucks.
Every time I click this button on and off,
on and off, on and off, just like that.
And that's all there really is.
That's how we toggle the class on and off.
Now, where is this applicable?
Well, if you need to hide and show something or if you want to make something,
Act because of a certain other thing.
And actually as a better example,
let's go ahead and get rid of this and let's create an input.
For an input.
And whenever we have this input, let's just like that.
When we have, when we have this input and we key up,
let's go ahead and check this value.
And then if that value is a particular name,
let's change the toggle,
the class to blue.
Otherwise the change it to not blue.
So let's go ahead and get this value.
So const val u is equal to this dot val.
Now you realize that I'm using the, this keyword here.
So now we need to write function.
We can say if value is equal to Caleb,
We could say Add class.
Else, box dot, remove class blue.
Now we're not really using toggle here in the sense that we're not using toggle function,
but we are toggling classes by removing an adding them.
And one thing we need to do is functions don't have arrow functions,
it's just the function keyword.
Let's go ahead and refresh our page here.
And if I type, Jacob doesn't work,
if I type gully doesn't work if I type,
Caleb, boom, turns blue.
And now I can toggle it just like this and by typing really anything else.
So that's two ways in which we can toggle based on different event listeners.
Now what I'd like you to do is go ahead and try toggle class.
You don't have to do this whole example here.
This example is, yeah,
pretty big and not super relevant to this class.
But make sure you go ahead and use the toggle class function here with a selector.
So you could do box dot Togo class blue.
Go ahead and give that a shot when you're done,
let's go ahead and add custom CSS,
not a class, but let's add custom CSS to an element.