1
00:00:00,000 --> 00:00:02,690
Okay, let's talk about sliding up and sliding down.

2
00:00:02,685 --> 00:00:06,255
Real easy here this is a lot like fade in and fade out.

3
00:00:06,255 --> 00:00:10,205
So I have a button here is registered as a click event.

4
00:00:10,200 --> 00:00:15,720
And I want to slide this box up and slide it down.

5
00:00:15,720 --> 00:00:17,340
So like an FAQ question,

6
00:00:17,340 --> 00:00:22,590
a frequently asked question section on a website and FAQ.

7
00:00:22,590 --> 00:00:26,630
So we can select this box whenever the button is clicked.

8
00:00:26,625 --> 00:00:32,265
And we could say slide down or we can say slide up.

9
00:00:32,265 --> 00:00:34,145
So let's first of all, slideUp,

10
00:00:34,140 --> 00:00:36,360
slide up is going to hide it.

11
00:00:36,360 --> 00:00:37,910
Refresh.

12
00:00:37,905 --> 00:00:39,665
It, slides it up.

13
00:00:39,660 --> 00:00:41,980
Pretty neat, right?

14
00:00:42,310 --> 00:00:46,540
We could also do slide down,

15
00:00:46,535 --> 00:00:48,745
which is just going to slide it down and make it visible.

16
00:00:48,740 --> 00:00:54,860
Or we can slide toggle and that's going to toggle it to slide up and slide down.

17
00:00:54,860 --> 00:00:57,070
So let's go ahead and refresh.

18
00:00:57,065 --> 00:01:01,265
Up, down, up, down.

19
00:01:01,265 --> 00:01:03,575
So this is a short lesson.

20
00:01:03,575 --> 00:01:06,625
Honestly, at this point you probably don't need to practice this anymore.

21
00:01:06,620 --> 00:01:08,770
Just keep this tucked away in your back pocket.

22
00:01:08,765 --> 00:01:10,345
Slide toggle.

23
00:01:10,340 --> 00:01:13,100
You can slide up and you can slide down.

24
00:01:13,100 --> 00:01:16,990
You're going to use this one more than a fade in and fade out for sure.

25
00:01:16,985 --> 00:01:19,075
So if you want a little bit of experience, yeah,

26
00:01:19,070 --> 00:01:21,590
definitely go and create an example like this.

27
00:01:21,590 --> 00:01:23,470
You can even just steal my example here.

28
00:01:23,465 --> 00:01:25,405
Otherwise, I'll let's head on over to

29
00:01:25,400 --> 00:01:29,190
the next lesson where we talk about callback functions.