1
00:00:00,120 --> 00:00:04,590
We can create an accordion menu using J query and G query UI.

2
00:00:04,620 --> 00:00:06,940
Here's an example of an accordion menu.

3
00:00:07,110 --> 00:00:09,120
Each tab has a heading.

4
00:00:09,120 --> 00:00:19,690
We can expand in collapse the slide panel by clicking the heading name.

5
00:00:19,690 --> 00:00:22,050
Now let's take a look at the script to see how this was done.

6
00:00:28,630 --> 00:00:36,910
The first thing we need to do is to create a div and give it an I.D. we gave this div the I.D. accordion

7
00:00:39,520 --> 00:00:50,310
your entire menu will be contained within the open and close div tag assign this I.D..

8
00:00:50,450 --> 00:00:55,440
Next we need to create the headings the headings should be nested in a div element.

9
00:00:55,550 --> 00:01:02,840
You don't have to give these div elements the name the corresponding panel content should also be contained

10
00:01:02,870 --> 00:01:04,980
in a div element.

11
00:01:05,270 --> 00:01:11,050
So if we look at the first item heading one is contained within an open and closed div tag.

12
00:01:11,230 --> 00:01:19,230
And same for paragraph 1 the same is true for the second and third menu item.

13
00:01:19,540 --> 00:01:25,870
Here we have three headings and three panels but you can have as many as you need next.

14
00:01:25,880 --> 00:01:27,080
If you look at the head tag

15
00:01:30,440 --> 00:01:39,190
you'll notice that we have we've included the j j query source file in addition to the J query UI file.

16
00:01:39,270 --> 00:01:44,560
We've also included a default see SS theme from the J query website.

17
00:01:44,580 --> 00:01:47,190
The theme is called smoothness.

18
00:01:47,190 --> 00:01:55,460
It contains some common CSX rules that are applied to UI interfaces if you decide not to include include

19
00:01:55,460 --> 00:02:01,030
this theme your script will still work but it will not include any styling.

20
00:02:01,190 --> 00:02:08,350
In this case you'll need to create your own style sheet and style rules after this style sheet.

21
00:02:08,350 --> 00:02:16,770
We have our script the script contains the accordion method which is applied to the accordion do here

22
00:02:16,770 --> 00:02:19,980
we can you can see we've referenced the div with I.D. accordion

23
00:02:23,430 --> 00:02:25,200
in order for this method to work.

24
00:02:25,230 --> 00:02:32,190
The J query UI dot J.S. file must be included in the head type.

25
00:02:32,500 --> 00:02:39,370
So again you can see we start with the document ready function and then we just call in reference the

26
00:02:39,370 --> 00:02:46,010
accordion method and we've applied that method to the accordion

27
00:02:49,230 --> 00:02:54,780
and that's it that will produce a fairly neat menu

28
00:02:57,750 --> 00:03:05,400
and just for the sake of this example if you wanted to add a fourth menu item you can simply copy and

29
00:03:05,400 --> 00:03:06,690
paste our block of code

30
00:03:10,180 --> 00:03:15,190
and when we refresh the page we'll see that it adds a fourth menu item.