Hey, everyone, in the beginning of this section, we've learned how to change the success of elements
by using the success method.
So this is how we use it.
We just call the method and then we pass the property and the value we want to apply in this case for
setting the display to Tanon.
We also learn that we can simplify it by using the hide method.
But what happens if we want to set multiple properties at the same time?
If that's the case, maybe it's better to add a class so then you can set all the properties in success
and then just add the class to an element.
So here we have this paragraph and this paragraph has the class of normal.
So let's inspect this.
So here it is.
It has a class of normal and the is example paragraph.
So if we get this paragraph and add a class of styling.
Let's see what happens if we do this, as you can see, we completely changed this paragraph.
This is because on my access file, I have a class called Styling where I set all these different styles.
So now how can we do this with Jay Quarrie?
Let's put these buttons to work.
So.
The paragraph we want to change is called example paragraph.
Let's take this to the code.
And then the buttons are the ad class remove class and torgau class, so these are the methods we are
going to use.
We can add or remove class or just toggle classes.
In this case, it can be very useful because we don't have to test if an element has a class or not,
something that would have to be done in pure JavaScript.
But with J Querrey, we don't have to worry about this.
We can just use the toggle class method as we are going to see in a moment.
So let's get started with the ad class and remove class to going to Visual Studio Code.
Let's start with the ad class.
So I'm just going to copy some click event from up here.
This one is fine.
All right, so now the button that we want to set the click event to is called and.
Class, it has an idea of add class and when we click this button, we just want to get this example
paragraph.
Which is an ID like this.
And then we are going to use the add class method.
And then the argument we pass here is the class we want to add in this case, the name of the class
is styling.
Now, let's do the same thing for the remove class button.
So we have a button called Remove Class.
And in this case, we just want to remove.
The style in class, so let's save this, let's see what happens, refreshing the page.
Now it's back to normal again if I click add class.
You can see that we can completely change this element just by adding a class if I click here again.
That's fine.
Jay Quarrie doesn't care.
It's just not going to do anything.
And the same thing for the remove now that it has this class.
If I click here, we can see that the class has been removed.
And when we click here again, just nothing is going to happen so we can keep playing with this.
But now, instead of doing this with two buttons and sometimes one or the other are not going to work,
so if I already have the class, then this button does not work anymore.
We don't need to do this.
We can actually use just one button because there's also the toggle class method.
So let's go back there and.
We have a button called Targo Class.
So here, Torgau.
Refreshing the page, and now this method is cool because it's testing if the element has the class
or not, if the element has the class, it is going to remove it.
If the element does not have the class, it is going to add it.
So this is pretty cool.
And as you can see, we only need one button to keep tackling this.
So that was all that I wanted to say.
For now, in the next few lessons, we are going to go back to this and do a cool example.
I'll see you in the next video.