1
00:00:00,480 --> 00:00:05,610
We can use geography to have an element slide down in our HMO document.

2
00:00:05,610 --> 00:00:13,050
This example illustrates how the effect looks if we click the View panel div a panel slides down with

3
00:00:13,050 --> 00:00:13,680
some text

4
00:00:16,310 --> 00:00:18,610
creating this effect is fairly simple.

5
00:00:18,650 --> 00:00:21,510
Let's take a look at the script to see how it works.

6
00:00:24,890 --> 00:00:35,660
The first thing to note is we have two DBS created in our body take the first div has the I.D. top bar.

7
00:00:35,870 --> 00:00:44,670
This is the div that will be click to activate the sliding panel the second div with the I.D. panel

8
00:00:45,000 --> 00:00:53,440
is the actual panel that will slide down we've defined some basic style rules in our style sheet for

9
00:00:53,440 --> 00:00:54,730
these specific dos

10
00:00:58,060 --> 00:00:58,570
first.

11
00:00:58,600 --> 00:01:07,520
We've specified that both the panel and top bar do will have padding of five pixels centralized text

12
00:01:07,520 --> 00:01:18,870
alignment a yellow background and a one pixel solid black border and we can see that you're the background

13
00:01:18,870 --> 00:01:26,360
is yellow there's a bit of there's a five pixel padding around the text

14
00:01:29,280 --> 00:01:38,660
you can see the black border and the text alignment is centralized that's where both the top bar and

15
00:01:38,660 --> 00:01:40,330
also the panel itself.

16
00:01:44,080 --> 00:01:46,750
The panel also has additional rules

17
00:01:49,700 --> 00:01:56,930
we've specified a padding of 80 pixels and a display non property to make sure that the panel is not

18
00:01:56,930 --> 00:02:05,660
visible on page load so remember initially when the page is loaded we don't see the panel do we only

19
00:02:05,660 --> 00:02:09,170
see it when the View panel div is quick

20
00:02:12,190 --> 00:02:16,240
now in our script in between our open and close script tags

21
00:02:20,090 --> 00:02:30,460
we've created our functions so inside the document the ready function we've attached a click event to

22
00:02:30,460 --> 00:02:31,870
the top bar do

23
00:02:34,710 --> 00:02:35,500
next.

24
00:02:35,700 --> 00:02:45,690
We've attached a slide down action on the panel and specify the speed of 1000 so this event or this

25
00:02:45,690 --> 00:02:54,350
action activates when this event occurs when the top bar is clicked the panel will slide down it is

26
00:02:54,350 --> 00:02:55,490
speed of 1000

27
00:02:58,900 --> 00:02:59,680
and that's it.

28
00:02:59,710 --> 00:03:03,970
As you can see creating this effect is fairly simple and produces a nice effect.