1
00:00:00,630 --> 00:00:04,620
In this lesson we're going to be developing an accordion as shown in this example

2
00:00:07,770 --> 00:00:12,180
when we click each heading the previous panel collapses and a new one expands

3
00:00:15,670 --> 00:00:19,550
in order to create an accordion.

4
00:00:19,550 --> 00:00:25,000
We start with a div and assign the class panel group.

5
00:00:25,020 --> 00:00:30,420
We also need to set an I.D. we've set the I.D. to accordion.

6
00:00:30,580 --> 00:00:35,780
You'll see how this is used in a moment for the purpose of this lesson.

7
00:00:36,940 --> 00:00:43,180
We're starting with only one panel so I'm going to refresh the page and we'll be adding the second and

8
00:00:43,180 --> 00:00:43,950
third panel.

9
00:00:43,990 --> 00:00:48,520
As we progressed through the tutorial.

10
00:00:48,770 --> 00:00:55,770
Next we create another div with two classes panel and panel default as you learned.

11
00:00:55,780 --> 00:01:02,560
This defines the style color of our panels in this case panel default.

12
00:01:02,790 --> 00:01:08,380
We'll create a light gray color inside this div.

13
00:01:08,380 --> 00:01:17,670
We have another div with the class panel with the class panel heading this contains our title as we

14
00:01:17,670 --> 00:01:20,230
learned in the last couple of exercises.

15
00:01:20,280 --> 00:01:27,680
It's important to note that our 8 element now also has a new attribute which we haven't seen before

16
00:01:28,010 --> 00:01:28,830
called data.

17
00:01:28,850 --> 00:01:32,090
Parent.

18
00:01:32,260 --> 00:01:41,930
This is necessary if developing an accordion the data parent value must be set to the I.D. that we initially

19
00:01:42,050 --> 00:01:45,200
defined in our first div element shown here

20
00:01:48,330 --> 00:01:52,080
so those too much must match in order for this to work.

21
00:01:54,950 --> 00:02:04,990
We also have an h r u f attribute set to e x 1 this value needs to match the div that contains our panel

22
00:02:04,990 --> 00:02:06,380
content.

23
00:02:06,520 --> 00:02:16,890
So this h r e f attribute e x 1 links to the content inside this div in the content inside this div

24
00:02:16,920 --> 00:02:19,500
is what we're seeing displayed here in our web browser.

25
00:02:24,960 --> 00:02:35,250
The content div has three classes defined panel collapse collapse and in so we've gone over those already

26
00:02:35,430 --> 00:02:44,520
in previous exercises and just again just to emphasize the ideas here must match the H R F attribute

27
00:02:44,520 --> 00:02:45,170
here.

28
00:02:45,360 --> 00:02:47,000
We've set it to e x 1.

29
00:02:47,010 --> 00:02:51,090
Again you can you can name it whatever you want to name it but they must match

30
00:02:54,420 --> 00:03:03,600
and we have another nested div here with the class panel body and this div contains our content to be

31
00:03:03,600 --> 00:03:14,270
displayed here so if I were to change that or just make a small add word and refresh you can see it

32
00:03:14,270 --> 00:03:20,530
shows up there to change the heading you just change this text over here.

33
00:03:27,160 --> 00:03:31,880
Okay now we're gonna add some additional panels to complete the accordion effect.

34
00:03:38,730 --> 00:03:43,760
So I've copied and pasted that block of code that we just went over because it's we're gonna be using

35
00:03:44,150 --> 00:03:52,940
an almost identical block of code we just have to make a few minor changes for our second panel item.

36
00:03:52,940 --> 00:04:01,340
So the first thing we need to do is set e x 1 to e x 2 and also update this I.D. to x 2.

37
00:04:01,910 --> 00:04:09,310
We can't have two panels with the same I.D. The second panel has to link to the I.D. of the second panel

38
00:04:11,550 --> 00:04:19,770
and I'll just change mean I'll just changes from main heading to heading to read all changes back to

39
00:04:19,770 --> 00:04:26,790
just adding 1 don't seem to file in refresh.

40
00:04:26,800 --> 00:04:33,530
So now you can see that we have two headings and two content areas

41
00:04:36,860 --> 00:04:39,950
and it's very simple to for the third you do the same thing again.

42
00:04:40,040 --> 00:04:49,220
Just copy that block of code paste it and changes to the X3 x3 and heading three

43
00:04:54,580 --> 00:04:55,860
and that's the full accordion.

44
00:04:55,980 --> 00:05:00,630
You can add as many items as you want but we'll leave it at three for the purpose of this story.