jQuery Tutorial - 57 - toggleClass Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dog
with a video tutorial from the new
Boston in the last video we looked at
removing classes and we use the toggle
event handler to actually add and then
remove a class simultaneously however we
actually have an attribute called toggle
class which will remove this
functionality altogether I use this
example previously because I know it's
something that is popularly used to
toggle an element so when you click for
example an image you might want to
highlight that image or you might want
to add a border around it for example
our current page looks like this we have
some text when we click on it we add the
highlight and bold attributes that are
found in our style CSS file which we've
obviously included in our page as well
as our class J s however we can remove
the need for this toggle event handler
all together so let's go ahead and get
rid of this altogether we can then just
reference the some text span so let's
say hash some text and we can actually
then bind the toggle class attribute on
to this and again with toggle class you
can apply an unlimited amount of classes
so at the moment we have highlight and
bold so let's go ahead and in here write
highlight and bold and now when we
return to our page you can see that we
have oh it's not working okay so we need
to add an event handler for this sorry
that's me thinking this was way too
simple let's go ahead and add an event
handler for when we click on some text
so some text click we need to add a
function
as we've seen before and then this can
just be in here so when we click on the
text and the span we will toggle the
highlight and bold classes that are
found in our style CSS file so now when
we click on it we get exactly the same
effect without actually having to use
the toggle event handler so with the
toggle class attribute we're now going
to go ahead and look at a slightly more
interesting example and we're actually
going to create an input field on our
main page so this is going to be type of
text and let's go ahead and well we
don't really need to supply anything
else but we do need to supply an ID for
this so I'm just going to call this an
input ok so now that we have this input
field let's go and refresh our browser
you can see that we've just got an input
field now what I want to happen is when
I click on this I want the background
color to change inside of this field and
we're going to use the toggle class
functionality to do this the attribute
in jQuery so inside class Jas we need to
reference the first of all the focus in
and out of this input field so let's go
ahead and say let's go ahead and say
referencing this field which I've called
input we're going to say input focus so
we're going to use the focus event
handler instead of here we can go ahead
then and add in our toggle so I'm going
to say hash input
dot toggle clasp and then we want to
choose a class so we'll choose the well
we'll say background color yellow like
that because that's going to work for
our text field so we've got background
color yellow and then that's highlight
so toggle class highlight and let's go
back to our browser when we click inside
of here you can see that highlights when
we move away however it doesn't you can
notice that it's just every time we
click inside of it so we could then
expand on this code so when we blur away
from it then we actually toggle the
class again however this is a quick
demonstration of toggle class and how
you can combine the add class and remove
class based on a single action just by
using the toggle class attribute