jQuery Tutorial - 36 - Toggle Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dorg
with a video tutorial for the new Boston
in this tutorial we're going to look at
jquery toggle and actually toggling and
we're going to be performing an action
depending on when the button is clicked
so for example we're going to use a link
now let's go ahead and create a link in
our markup and i'm going to write in
here press me or click me would be more
appropriate okay so inside the href we
need a hash and we want to create an ID
and i'm just going to call this click me
now what we're trying to achieve is when
we click this the first time we click it
we are going to do something and this
second time we click it we're going to
do something else so let's go to our
browser and preview this and you'll see
that we just have a link click me when
we click at the moment it does nothing
so we need to create a handler that
checks when first of all this is clicked
oh in fact no we can just use the toggle
so when this is clicked we can append
the event handler toggle and this will
do two things the first thing that we'll
do is show us something the second time
it will revert back or will show us
something else then it will revert back
to the first option so let's go ahead
and create a div underneath here and we
can give that an ID of click event so
once this is clicked we need to show an
event and then another one and then
revert back to the first one and the
toggle function actually allows you to
show and hide elements for example
simultaneously so you can use the same
button however in this tutorial we're
just looking at the event so this will
show you how it works and then later on
we can use toggle to actually hide and
show things in a preview in a later
tutorial so now we want to go ahead and
create a new javascript file and this is
going to be called toggle j/s
and we want to include that in our page
as well so you just copy and paste this
down here and change this to toggle
Jeff's okay so we want to add an toggle
event handler to this click me so let's
go ahead and type a dollar in
parentheses we need to reference it
which is click underscore me then we say
dot toggle now this time we're going to
be creating two functions inside here as
opposed to one as we've seen in previous
tutorials so we want to first of all
create a function here with the block
and then we want to create another
function here with another block so
let's just go ahead and pull this down
and the same with this one so we can
work in a in two different areas so
we've got here and here okay so the
first time we want to click the button
or we click the link we want to display
something so we need to reference our
click event div and we're going to play
some text inside of here so let's go
ahead and say click see what I called it
event click event dot HTML which is
going to place some text inside of this
div let's just say yes and then we can
go down here and choose to do the same
thing so click event and dot HTML no so
now what's going to happen is when we
click on the link here we're going to
use the toggle to first of all display
yes in this click event div then we're
going to display no the second time the
user clicks on it what will happen is
when they click on it again it will then
display yes again now you may be
wondering what use this might have well
if you had two different options for
example you wanted to say I've no
display link to say do you like jQuery
and the you want to give the user the
option to click it and change the value
I mean
so that's an audit example but hopefully
through this tutorial you'll see the
functionality of it so now that we've
got click me when we click it once you
can see that we've displayed yes as
we've seen in our code when we click it
again this now changes to no so you can
now see that when we click it a third
time it changes back to yes so
essentially what we're doing is we're
checking for the click of this but we're
toggling so we're toggling between yes
and no so hopefully now you can see the
advantage of being able to use this and
use it easily being able to change an
option for example this could for
example be an option that the user might
want to change within a settings area on
a web site it could have it has a
variety of uses and a wide variety of
uses at that so I'll leave it up to you
with as how you use this and how you
interpret the uses it can have however
for now that is the toggle event handler
in jQuery