Something cool that you do with Jake weariest sliding text up and down coming hiding and revealing it
basically but more of a slide in fashion as opposed to a fading in and out or anything like that.
So what we're going to do is basically just like all the other J.
Querrey I've ever shown you before or start out within our basic document ready function area right
up here.
And we're going to come down here and start up there.
Queery dollar sign and open with the parentheses and quote marks there.
And what we're going to do is really create a area that's going to be clickable that will allow you
to slide up the kind of like the Heider area.
So it make more sense when you can actually see it.
But within there we're going to create the ID of the slide up.
All right.
So one thing that is given the idea of slide up is clicked.
We're going to create a function for.
And so I get my opening closing parentheses they're opening closing curly brackets they're going to
go ahead and close that one out because they seem to always forget to do that and then within slide
up within the function of slide up we're going to do is a nother dollar sign and we're going to say
see what's my text every call text box.
So you get that idea of text box right there.
Fabulous copy that just.
I'm not messing anything up here.
You're on target that ID of text box Amaran do is make it dot the law.
Loeb's sign up the capital you slide.
And we said a pair of parentheses there and we're at Target how we want it to slide up fast slow.
Give it a couple of seconds to you know that duration for it to slide over and we can say well not make
it take too long will say two seconds which is 2000 milliseconds there and then how do we actually want
it to side to side up down.
What we're going to do here is linear.
So come up with an ID line and I close that out right there with a semi-colon.
So now we do basically the same thing to make it slide back down.
You don't want your text to slide up and then just disappear forever.
So when we create another one another button that will give the idea of can't slide down and same thing
here and click on click and give it a function of going to target the text box.
And in this case he's going to say slide down and give it the same duration right there or we could
say something like oh I can't like best.
3Do fast we need to start over here.
We it's something like fast we really need to put that in quotes there and still want to do this as
a linear sliding effect here.
But you know what I'm going to stick with 2000 just to kind of have equal on up and down there.
So very simple.
Now the last thing that I want to do is to create one more and this will I'm going to say
I actually was targeted for a new ID.
So I call it toggle Slyne And that wanted to say click.
So again I click and we all creatures that were done in the past function open and close that with their
opening close a curly bracket and then within the function of table slide right there we're going to
do is we're going to do the same thing.
Just it appears.
So let's go ahead and copy that on of the text box and we will say slide title and we'll stick with
2000 and instead of linear and where we will still have the comma but we're say with a function in there
this time kind of mix things up a little bit here.
Open and close that and this time or to put an alert box.
You don't have to do is put a little color block box in there and it will simply say dance.
We know that it's all done with the toggle slide in fact.
So let's make sure to pose that up properly there with a semi colon.
We have this which we need to
so get back on there.
We still need to close our homes that that the semi-colon and that helps a semi-colon as well.
I think I think I think we are all set there.
So come on down here we're not really worried about any styling from this one.
So when we get rid of that style which was from a previous project and we are going to have our buttons
here which in the past I had used a fading effect to show that in a previous video all I to do this
time is we will do
slide just kind of like in
Hamal with the text of slide Upsilon on it.
That's what the thing is that we're doing here is the ID site up again pound sign up same thing and
a little break here will do slide down.
It was done the same way.
Panels slide down and we got one more that we wanted to put in there.
This was our top goal.
She with that is here in a second.
And that one was toggle slide I believe.
Then I might add that one SOS call that title.
So everything else looks and plays here because my idea of text box that's what it should be sliding
up and down Heideman are really bad that those two paragraphs right there I shove three text buttons
in here that will all be triggered by these three functions that I created with my Jake Query.
I must say that a slide and I don't come back to my document and put slide onto the browser window here.
I see it.
So if you slide up slide down anti-GPL table here as as they slide up I click on that you can see that
my text just slid up.
Slide down reveals the text again.
Tile gives me a alert box here it's all done.
Tiger also opens and closes.
So I can just have one button here as opposed to having two separate buttons.
So that's a difference between the two up upside down maybe used for something but for the most part
a lot of times people just do using a toggle with this can be a graphic as opposed to just the text
there.
And you have the one button that will open and close your text.