1
00:00:03,460 --> 00:00:11,430
Accordions are one of those annoying instruments that some of you may have seen already.

2
00:00:11,430 --> 00:00:16,020
It has one of those bellows with a keypad down below

3
00:00:16,020 --> 00:00:20,940
here and then you blow and then play the music with the keys there.

4
00:00:20,940 --> 00:00:23,645
And not everybody enjoys it.

5
00:00:23,645 --> 00:00:28,740
I'm pretty sure. But no offense to accordion players.

6
00:00:28,740 --> 00:00:34,650
Accordions in bootstrap are very interesting for sure.

7
00:00:34,650 --> 00:00:39,380
We'll look at how we apply accordions to be able to reveal and

8
00:00:39,380 --> 00:00:44,580
hide content in our web page in this exercise.

9
00:00:44,580 --> 00:00:51,300
Going back to About Us at HTML page where we had the corporate leadership information.

10
00:00:51,300 --> 00:00:56,960
Now, I'm going to replace the top navigation with an accordion based navigation.

11
00:00:56,960 --> 00:01:03,175
I'm going to remove this UL that defines the term navigation completely.

12
00:01:03,175 --> 00:01:08,320
And then we're gonna design the accordion around the content that we already have.

13
00:01:08,320 --> 00:01:13,700
So, let's delete this UL that contains the tab navigation so they will be left

14
00:01:13,700 --> 00:01:20,160
with just this part which is enclosed inside the top panel and the top content.

15
00:01:20,160 --> 00:01:22,115
So, we're going to go and modify this.

16
00:01:22,115 --> 00:01:23,740
Going to this div here,

17
00:01:23,740 --> 00:01:33,225
I'm going to remove this class from there and then I apply the id as accordion.

18
00:01:33,225 --> 00:01:40,060
We need this id later on to be able to create the accordion that div,

19
00:01:40,060 --> 00:01:43,175
that contains this content is still in place there.

20
00:01:43,175 --> 00:01:46,545
So, the top content is now changed to accordion.

21
00:01:46,545 --> 00:01:49,745
Now, each of this content in here,

22
00:01:49,745 --> 00:01:53,460
we're going to convert that into a card

23
00:01:53,460 --> 00:01:59,080
based structure there so that they can reveal the content in

24
00:01:59,080 --> 00:02:02,360
each of those cards so you will see me using the card and

25
00:02:02,360 --> 00:02:09,220
the card body classes there to enclose this content.

26
00:02:09,220 --> 00:02:12,595
Now, going into the actual content here,

27
00:02:12,595 --> 00:02:16,905
I'm going to start applying the card class here with the div there.

28
00:02:16,905 --> 00:02:21,900
So, we'll say, "div class card" and

29
00:02:21,900 --> 00:02:29,890
then close the div there and then this content goes into the div there.

30
00:02:29,890 --> 00:02:34,110
Now, in here, we are going to go in and create

31
00:02:34,110 --> 00:02:41,610
a div with the class "card header."

32
00:02:42,030 --> 00:02:45,280
I'm going to show you for one of them and then we are going to

33
00:02:45,280 --> 00:02:48,425
repeat this process for the remaining three also.

34
00:02:48,425 --> 00:02:57,480
So, we'll say, "card header roll tab" and then "id peterhead."

35
00:02:57,480 --> 00:03:04,335
I'm going to take this h3 from down below here,

36
00:03:04,335 --> 00:03:10,265
cut it out and then paste it into the card panel.

37
00:03:10,265 --> 00:03:14,815
So, this h3 that defines the name of

38
00:03:14,815 --> 00:03:18,945
the corporate leadership person is cut from

39
00:03:18,945 --> 00:03:24,310
inside the tab panel and then moved in to the card header here.

40
00:03:24,310 --> 00:03:29,060
This is going to act as my navigation aid.

41
00:03:29,060 --> 00:03:35,425
Now, to this h3, I'm going to apply a class called mb-0.

42
00:03:35,425 --> 00:03:37,920
So, this is mb-0 here.

43
00:03:37,920 --> 00:03:41,260
Now, this name itself,

44
00:03:41,260 --> 00:03:44,840
I'm going to enclose this inside and an a,

45
00:03:44,840 --> 00:03:49,300
so I will go to the next line and then say,

46
00:03:49,300 --> 00:03:56,650
"a data toggle" and

47
00:03:56,650 --> 00:04:00,845
the data toggle will say, "collapse."

48
00:04:00,845 --> 00:04:06,025
So, now, you see that you're using the collapse plugin.

49
00:04:06,025 --> 00:04:09,440
So, we have this closing h3 there.

50
00:04:09,440 --> 00:04:12,630
So, I'm going to shift it to the next line

51
00:04:12,630 --> 00:04:17,400
here and then I'm going to close the a tag right there.

52
00:04:17,400 --> 00:04:25,265
So, with this the a tag now encloses the name of the CEO in here.

53
00:04:25,265 --> 00:04:31,285
And then the h3 tag of course closes the h3 on top and then this is

54
00:04:31,285 --> 00:04:37,525
inside the div which is the class card header.

55
00:04:37,525 --> 00:04:43,950
So, this forms the header structure for my accordion div.

56
00:04:43,950 --> 00:04:46,915
Going now to the tab panel below,

57
00:04:46,915 --> 00:04:54,050
I'm going to change this class from tab panel fade to collapse.

58
00:04:54,050 --> 00:05:01,455
So this would be a collapse plugin which will be useful for our accordion

59
00:05:01,455 --> 00:05:05,680
and also I will remove this active class

60
00:05:05,680 --> 00:05:10,075
for this and the id will be left as peter for this.

61
00:05:10,075 --> 00:05:18,375
And then you'll say, "data parent" and you would specify accordion.

62
00:05:18,375 --> 00:05:24,960
You see why we gave the id of accordion to the div that encloses all these content.

63
00:05:24,960 --> 00:05:28,010
So, this is the way to specify that this is going to

64
00:05:28,010 --> 00:05:31,720
form part of the accordion that you are constructing there.

65
00:05:31,720 --> 00:05:34,420
So, that's why data parent accordion.

66
00:05:34,420 --> 00:05:37,930
Now, the content inside this tab panel,

67
00:05:37,930 --> 00:05:42,340
I'm going to enclose it inside the div with

68
00:05:42,340 --> 00:05:48,460
the class card body

69
00:05:48,920 --> 00:05:54,125
and close off that div here,

70
00:05:54,125 --> 00:05:57,790
and then indent this content in there.

71
00:05:57,790 --> 00:06:03,440
Let's save the changes and then go and take a look at our web page on this moment.

72
00:06:03,440 --> 00:06:08,735
Going to our web page you now notice that in the corporate leadership,

73
00:06:08,735 --> 00:06:16,550
the CEO's name is highlighted here in the card header here.

74
00:06:16,550 --> 00:06:19,150
And then the content is down below here.

75
00:06:19,150 --> 00:06:25,830
Now, we will create the remaining three down below and then enclose all of them in there.

76
00:06:25,830 --> 00:06:30,485
I'm going to repeat the same structure for the remaining ones.

77
00:06:30,485 --> 00:06:34,405
So, I will have the card with the card header,

78
00:06:34,405 --> 00:06:39,075
and the card header will enclose the name of the person like this.

79
00:06:39,075 --> 00:06:40,730
So, you pretty much will follow

80
00:06:40,730 --> 00:06:45,060
the same structure for the remaining three pieces of content.

81
00:06:45,060 --> 00:06:49,190
So, let's make the changes and then we'll come back and review the code.

82
00:06:49,190 --> 00:06:51,185
Coming back to the code,

83
00:06:51,185 --> 00:06:54,405
you now see that for the remaining three,

84
00:06:54,405 --> 00:06:57,880
you notice that I am still using the card here

85
00:06:57,880 --> 00:07:01,535
with the card header here and h3 with the mb-0.

86
00:07:01,535 --> 00:07:07,590
This is inside the card header class div there and then down below

87
00:07:07,590 --> 00:07:10,790
the class only as collapse and then with the id

88
00:07:10,790 --> 00:07:14,445
and then the card body enclosing the P there.

89
00:07:14,445 --> 00:07:18,745
Same thing with the remaining two also.

90
00:07:18,745 --> 00:07:20,700
So, with this change,

91
00:07:20,700 --> 00:07:26,030
these three remaining corporate leaders information will be

92
00:07:26,030 --> 00:07:29,675
collapsed but Peter Pan's scarpered information

93
00:07:29,675 --> 00:07:33,445
will be revealed when the first render the web page.

94
00:07:33,445 --> 00:07:36,050
So, with this change, now,

95
00:07:36,050 --> 00:07:39,710
this code snippet is obviously available in

96
00:07:39,710 --> 00:07:44,090
the instructions that follow here so no need to worry too much.

97
00:07:44,090 --> 00:07:49,865
You can always refer to that to ensure that you have done it correctly.

98
00:07:49,865 --> 00:07:52,495
So, let's save the changes.

99
00:07:52,495 --> 00:07:54,740
Switching back to our web page,

100
00:07:54,740 --> 00:07:57,430
you now see the accordion constructed here.

101
00:07:57,430 --> 00:08:03,125
So, you see that the first corporate leaders information is displayed here.

102
00:08:03,125 --> 00:08:06,190
The remaining three are collapsed in this moment.

103
00:08:06,190 --> 00:08:11,790
So, that's the reason for the use of the collapse plugin and also the reason for shifting

104
00:08:11,790 --> 00:08:18,275
the name of the corporate leader into the card title.

105
00:08:18,275 --> 00:08:21,035
See you saw that it'll be displayed like this in there.

106
00:08:21,035 --> 00:08:25,150
Now, clicking on any one of them you now notice that when you click on

107
00:08:25,150 --> 00:08:29,785
that that content will be revealed but the remaining three are hidden.

108
00:08:29,785 --> 00:08:32,315
So, this is the accordion behavior here.

109
00:08:32,315 --> 00:08:36,245
So with this, we complete this exercise.

110
00:08:36,245 --> 00:08:42,630
This is a good time for you to do a git commit with the message accordion..