1 00:00:05,320 --> 00:00:11,260 Something cool that you do with Jake weariest sliding text up and down coming hiding and revealing it 2 00:00:11,260 --> 00:00:16,540 basically but more of a slide in fashion as opposed to a fading in and out or anything like that. 3 00:00:16,540 --> 00:00:20,790 So what we're going to do is basically just like all the other J. 4 00:00:20,790 --> 00:00:27,610 Querrey I've ever shown you before or start out within our basic document ready function area right 5 00:00:27,610 --> 00:00:28,300 up here. 6 00:00:31,440 --> 00:00:34,870 And we're going to come down here and start up there. 7 00:00:34,950 --> 00:00:41,270 Queery dollar sign and open with the parentheses and quote marks there. 8 00:00:41,280 --> 00:00:47,040 And what we're going to do is really create a area that's going to be clickable that will allow you 9 00:00:47,040 --> 00:00:50,120 to slide up the kind of like the Heider area. 10 00:00:50,280 --> 00:00:52,400 So it make more sense when you can actually see it. 11 00:00:53,520 --> 00:00:59,880 But within there we're going to create the ID of the slide up. 12 00:00:59,890 --> 00:01:00,680 All right. 13 00:01:00,840 --> 00:01:08,600 So one thing that is given the idea of slide up is clicked. 14 00:01:08,790 --> 00:01:12,830 We're going to create a function for. 15 00:01:13,690 --> 00:01:20,340 And so I get my opening closing parentheses they're opening closing curly brackets they're going to 16 00:01:20,340 --> 00:01:24,160 go ahead and close that one out because they seem to always forget to do that and then within slide 17 00:01:24,250 --> 00:01:31,610 up within the function of slide up we're going to do is a nother dollar sign and we're going to say 18 00:01:32,690 --> 00:01:35,650 see what's my text every call text box. 19 00:01:35,830 --> 00:01:38,260 So you get that idea of text box right there. 20 00:01:38,270 --> 00:01:39,520 Fabulous copy that just. 21 00:01:39,550 --> 00:01:42,350 I'm not messing anything up here. 22 00:01:42,380 --> 00:01:49,860 You're on target that ID of text box Amaran do is make it dot the law. 23 00:01:49,990 --> 00:01:56,260 Loeb's sign up the capital you slide. 24 00:01:56,830 --> 00:02:03,090 And we said a pair of parentheses there and we're at Target how we want it to slide up fast slow. 25 00:02:03,130 --> 00:02:11,080 Give it a couple of seconds to you know that duration for it to slide over and we can say well not make 26 00:02:11,080 --> 00:02:17,890 it take too long will say two seconds which is 2000 milliseconds there and then how do we actually want 27 00:02:17,960 --> 00:02:20,230 it to side to side up down. 28 00:02:20,410 --> 00:02:24,700 What we're going to do here is linear. 29 00:02:24,860 --> 00:02:31,450 So come up with an ID line and I close that out right there with a semi-colon. 30 00:02:31,510 --> 00:02:34,960 So now we do basically the same thing to make it slide back down. 31 00:02:34,960 --> 00:02:38,250 You don't want your text to slide up and then just disappear forever. 32 00:02:38,590 --> 00:02:46,430 So when we create another one another button that will give the idea of can't slide down and same thing 33 00:02:46,450 --> 00:02:54,300 here and click on click and give it a function of going to target the text box. 34 00:02:54,490 --> 00:03:00,820 And in this case he's going to say slide down and give it the same duration right there or we could 35 00:03:00,820 --> 00:03:07,360 say something like oh I can't like best. 36 00:03:07,660 --> 00:03:11,670 3Do fast we need to start over here. 37 00:03:11,810 --> 00:03:17,170 We it's something like fast we really need to put that in quotes there and still want to do this as 38 00:03:17,170 --> 00:03:20,310 a linear sliding effect here. 39 00:03:20,470 --> 00:03:26,050 But you know what I'm going to stick with 2000 just to kind of have equal on up and down there. 40 00:03:26,350 --> 00:03:27,460 So very simple. 41 00:03:27,460 --> 00:03:33,460 Now the last thing that I want to do is to create one more and this will I'm going to say 42 00:03:36,150 --> 00:03:40,910 I actually was targeted for a new ID. 43 00:03:41,310 --> 00:03:48,290 So I call it toggle Slyne And that wanted to say click. 44 00:03:48,610 --> 00:03:56,640 So again I click and we all creatures that were done in the past function open and close that with their 45 00:03:56,780 --> 00:04:02,740 opening close a curly bracket and then within the function of table slide right there we're going to 46 00:04:02,740 --> 00:04:04,720 do is we're going to do the same thing. 47 00:04:04,740 --> 00:04:05,610 Just it appears. 48 00:04:05,610 --> 00:04:15,730 So let's go ahead and copy that on of the text box and we will say slide title and we'll stick with 49 00:04:15,730 --> 00:04:24,460 2000 and instead of linear and where we will still have the comma but we're say with a function in there 50 00:04:24,490 --> 00:04:28,070 this time kind of mix things up a little bit here. 51 00:04:28,180 --> 00:04:31,570 Open and close that and this time or to put an alert box. 52 00:04:31,720 --> 00:04:37,260 You don't have to do is put a little color block box in there and it will simply say dance. 53 00:04:37,270 --> 00:04:43,060 We know that it's all done with the toggle slide in fact. 54 00:04:43,090 --> 00:04:46,470 So let's make sure to pose that up properly there with a semi colon. 55 00:04:46,600 --> 00:04:51,280 We have this which we need to 56 00:04:56,430 --> 00:04:57,850 so get back on there. 57 00:04:57,870 --> 00:05:07,640 We still need to close our homes that that the semi-colon and that helps a semi-colon as well. 58 00:05:08,010 --> 00:05:12,190 I think I think I think we are all set there. 59 00:05:12,240 --> 00:05:16,840 So come on down here we're not really worried about any styling from this one. 60 00:05:17,060 --> 00:05:23,220 So when we get rid of that style which was from a previous project and we are going to have our buttons 61 00:05:23,220 --> 00:05:29,460 here which in the past I had used a fading effect to show that in a previous video all I to do this 62 00:05:29,460 --> 00:05:30,810 time is we will do 63 00:05:33,990 --> 00:05:36,730 slide just kind of like in 64 00:05:40,150 --> 00:05:42,190 Hamal with the text of slide Upsilon on it. 65 00:05:42,190 --> 00:05:50,240 That's what the thing is that we're doing here is the ID site up again pound sign up same thing and 66 00:05:50,380 --> 00:05:55,160 a little break here will do slide down. 67 00:05:55,400 --> 00:05:56,720 It was done the same way. 68 00:05:58,430 --> 00:06:06,020 Panels slide down and we got one more that we wanted to put in there. 69 00:06:06,020 --> 00:06:08,200 This was our top goal. 70 00:06:09,040 --> 00:06:10,770 She with that is here in a second. 71 00:06:11,090 --> 00:06:15,910 And that one was toggle slide I believe. 72 00:06:19,060 --> 00:06:24,750 Then I might add that one SOS call that title. 73 00:06:24,940 --> 00:06:29,710 So everything else looks and plays here because my idea of text box that's what it should be sliding 74 00:06:29,710 --> 00:06:35,080 up and down Heideman are really bad that those two paragraphs right there I shove three text buttons 75 00:06:35,080 --> 00:06:40,510 in here that will all be triggered by these three functions that I created with my Jake Query. 76 00:06:40,750 --> 00:06:47,530 I must say that a slide and I don't come back to my document and put slide onto the browser window here. 77 00:06:48,090 --> 00:06:49,300 I see it. 78 00:06:49,390 --> 00:06:53,740 So if you slide up slide down anti-GPL table here as as they slide up I click on that you can see that 79 00:06:53,740 --> 00:06:55,670 my text just slid up. 80 00:06:55,990 --> 00:06:58,250 Slide down reveals the text again. 81 00:06:58,320 --> 00:07:02,940 Tile gives me a alert box here it's all done. 82 00:07:03,000 --> 00:07:05,150 Tiger also opens and closes. 83 00:07:05,440 --> 00:07:09,010 So I can just have one button here as opposed to having two separate buttons. 84 00:07:09,040 --> 00:07:13,960 So that's a difference between the two up upside down maybe used for something but for the most part 85 00:07:14,020 --> 00:07:18,940 a lot of times people just do using a toggle with this can be a graphic as opposed to just the text 86 00:07:18,940 --> 00:07:19,380 there. 87 00:07:19,480 --> 00:07:21,940 And you have the one button that will open and close your text.