1
00:00:00,242 --> 00:00:04,459
[MUSIC]

2
00:00:04,459 --> 00:00:09,590
Let's now talk about a very useful plugin
in Bootstrap called as the Collapse.

3
00:00:09,590 --> 00:00:14,110
We have seen its application
in the navigation bar earlier.

4
00:00:14,110 --> 00:00:19,050
We'll revisit that code and
take a quick look at it in more detail.

5
00:00:19,050 --> 00:00:21,910
A related component is
called as the Accordion.

6
00:00:21,910 --> 00:00:26,310
The Accordion makes use of the Collapse
plugin for its functioning.

7
00:00:26,310 --> 00:00:30,100
And we will see that in detail
in the exercise that follows.

8
00:00:31,740 --> 00:00:36,570
The Collapse plugin provides
an easy way of revealing and

9
00:00:36,570 --> 00:00:38,487
hiding content on your web page.

10
00:00:40,030 --> 00:00:45,307
This revealing and
hiding of the content is usually triggered

11
00:00:45,307 --> 00:00:50,186
by the user clicking on a button or
a link in your web page.

12
00:00:50,186 --> 00:00:55,001
Now you will see many places
where the Collapse kind of

13
00:00:55,001 --> 00:01:00,006
behavior is very well
leveraged to show content.

14
00:01:00,006 --> 00:01:04,760
We'll revisit our navbar to look at
the Collapse plugin in action, and

15
00:01:04,760 --> 00:01:07,590
then we'll also see
an Accordion example next.

16
00:01:08,630 --> 00:01:14,381
Going back to our web page, you'll
recall that when we created the navbar

17
00:01:14,381 --> 00:01:19,948
in our web page for extra-small screens,
the navbar was collapsed and

18
00:01:19,948 --> 00:01:24,346
then it was revealed when we
clicked on the button here.

19
00:01:24,346 --> 00:01:29,670
Now this is an example of the use
of the Collapse plugin here.

20
00:01:29,670 --> 00:01:34,890
When we look at the code, we will see that
we actually apply the Collapse plugin to

21
00:01:34,890 --> 00:01:38,440
the div that contains this navigation bar.

22
00:01:39,530 --> 00:01:41,534
Taking a look at the code for

23
00:01:41,534 --> 00:01:46,320
our navigation bar that we designed
earlier, you saw that in here,

24
00:01:46,320 --> 00:01:51,012
inside the container, we created
this button which is displayed for

25
00:01:51,012 --> 00:01:56,850
the extra-small screen sizes by
using the navbar-toggler class.

26
00:01:56,850 --> 00:01:59,440
Look at the div that
follows this button here.

27
00:01:59,440 --> 00:02:02,600
For the div that follows this button,
we used the collapse class.

28
00:02:02,600 --> 00:02:06,495
So this is the use of the Collapse
plugin in our navbar.

29
00:02:06,495 --> 00:02:10,627
So what this creates is that
this particular content,

30
00:02:10,627 --> 00:02:15,095
our navbar that is enclosed inside
this div, will be collapsed for

31
00:02:15,095 --> 00:02:17,065
the extra-small screen sizes.

32
00:02:17,065 --> 00:02:22,080
And then together with the Collapse
plugin, this button that appears

33
00:02:22,080 --> 00:02:26,589
there will trigger the showing and
hiding of this navbar here.

34
00:02:26,589 --> 00:02:32,582
That is why when you look at the button,
you will see that right there,

35
00:02:32,582 --> 00:02:38,171
we supply the data-toggle attribute
with the collapse in here,

36
00:02:38,171 --> 00:02:42,350
and then the data-target as #Navbar here.

37
00:02:42,350 --> 00:02:47,960
And notice that the id for
this div that we applied here is Navbar.

38
00:02:47,960 --> 00:02:53,030
So we are specifying essentially that this
button is going to act as the triggering

39
00:02:53,030 --> 00:02:59,460
mechanism for this Collapse
plugin to work on this div here.

40
00:02:59,460 --> 00:03:03,387
So this is a use of the Collapse
plugin in your web page.

41
00:03:04,590 --> 00:03:10,840
Also, we'll look at the other component,
which is the Accordion in Bootstrap.

42
00:03:10,840 --> 00:03:12,410
How does an Accordion behave?

43
00:03:12,410 --> 00:03:16,110
So this is an example of an Accordion that
we're going to construct in the exercise

44
00:03:16,110 --> 00:03:16,928
that follows.

45
00:03:16,928 --> 00:03:21,520
So here, you'll see that I have
replaced the tabbed navigation that we

46
00:03:21,520 --> 00:03:25,846
did in the previous exercise
by using an Accordion here.

47
00:03:25,846 --> 00:03:30,480
The way the Accordion works is that
one piece of content is revealed and

48
00:03:30,480 --> 00:03:32,020
the remaining three are hidden.

49
00:03:32,020 --> 00:03:35,640
So this uses the Collapse plugin for
this purpose.

50
00:03:35,640 --> 00:03:41,920
So when you click on any one of
these other corporate leader's name,

51
00:03:41,920 --> 00:03:45,490
then the details of that
corporate leader gets revealed and

52
00:03:45,490 --> 00:03:47,280
the remaining three gets hidden.

53
00:03:47,280 --> 00:03:50,270
So this is the Accordion behavior here.

54
00:03:50,270 --> 00:03:52,700
If you are familiar with an accordion,

55
00:03:52,700 --> 00:03:57,000
the musical instrument, you know how
the bellows of the accordion work.

56
00:03:57,000 --> 00:04:02,530
So this is, in some sense, behaving
like the bellows of the accordion.

57
00:04:02,530 --> 00:04:08,996
So that's the reason why this component is
referred to as an Accordion in Bootstrap.

58
00:04:08,996 --> 00:04:17,280
One more example of the Collapse plugin
in use is on your own course website.

59
00:04:17,280 --> 00:04:19,350
So if you go to your course website, and

60
00:04:19,350 --> 00:04:23,360
then you go into the content
of your course website and

61
00:04:23,360 --> 00:04:28,730
start viewing the content here,
you will notice that on the left side,

62
00:04:28,730 --> 00:04:32,940
you have a navigation that comes
into picture on the left side.

63
00:04:32,940 --> 00:04:35,390
So this is the navigation there.

64
00:04:35,390 --> 00:04:40,510
So when you click on each one of them,
you notice how the content in here

65
00:04:40,510 --> 00:04:45,980
is hidden and revealed by clicking
on each of these links there.

66
00:04:45,980 --> 00:04:51,246
So this is like the Collapse
plugin that we saw in Bootstrap.

67
00:04:51,246 --> 00:04:57,780
Although, of course, the Coursera
page actually doesn't use Bootstrap.

68
00:04:57,780 --> 00:05:02,306
We'll move to the next exercise
where we will see how we construct

69
00:05:02,306 --> 00:05:07,010
the Accordion for showing our
corporate leadership information.

70
00:05:07,010 --> 00:05:13,120
[MUSIC]