Welcome back.
So in this video where and talk about the tango class method.
So let's head over to our HIV Doc shortcut.
Learn advance J query and we're gonna do right click New Folder 0 8 and we're gonna do toggle class
method.
A close that out I head over to sublime.
I already have this file open on my closes All right click on toggle class method and do control asked
to index that each email and then I'm going to control and control us and demand that J.S. and we're
gonna do the same song and dance where we're going to copy from the setup J query folder.
Same with Amanda J ust saw paste that here and let's minimize that and we're going to do so we've got
both of those erm right click open the browser just to make sure that we're connected and we are.
So we're going to go there.
So I'll clear that out and I'm gonna close this and now what we're gonna do is we're going to build
out the toggle class so the first thing I want to do is I want to write out some HD him out so we're
gonna do in one.
We're going to do heading one and then we'll do an H2
head into.
OK.
And then below that we're going to do paragraph.
This is a paragraph
and this will be this is another paragraph
and we're going to do button and this will be a toggle class
OK.
So we've got the H to hold on numbered a little Stylin and then we'll do the J query.
So we're gonna do.
Class or other style first
and then we're gonna do class blue
and then color is gonna be blue.
Now the reason why we're doing this is that where you can do the toggle because right now if I right
click on open the browser it's just going to be black text and when I click the toggle class it's not
gonna do anything because we haven't given a functionality but what we're doing is this is the toggle.
So we're gonna call this class Blue to display blue when we do the toggle so let's go over to our JavaScript
file my close to lead the console that log content and we're going to do document ready function and
we're going to do dollar sign button dark click function
and we'll do each one go inside of their H1 com H2 H.
Nothing else but a P and we're going to toggle class and then we're gonna call him Blue.
So the nice thing about this is if you want to toggle between two of them you don't need to write out
the add or remove you can just do toggle if you want to have that option.
So if I right click on open on the browser now it's going to toggle
and this is kind of a cool thing to have.
For example if you were doing a web site demo and you had five color schemes let's just say it two color
schemes if two color schemes and you want to toggle between the two.
This is a great way to do that because you can have you know change color and then click it and then
all the elements where you change the color would all change at the same time.
That would be a great way to use the toggle class method.
So with that in mind I'll see in the next video.
Thanks for watching.