1
00:00:00,360 --> 00:00:06,870
We can create collapsible elements that give the user the ability to show or hide content on a web page.

2
00:00:06,870 --> 00:00:11,730
This example shows how a collapsible works when we click the collapse button.

3
00:00:11,730 --> 00:00:15,140
The content appears when we click it again it disappears.

4
00:00:16,440 --> 00:00:22,340
In order to create this we start with a button element.

5
00:00:22,450 --> 00:00:33,610
There are two important attributes that must be included for this to work the data toggle attribute.

6
00:00:33,660 --> 00:00:39,300
You can see that we have it set to collapse and the data target attribute.

7
00:00:39,300 --> 00:00:45,620
And this needs to be set to the I.D. of the div that can change the collapsible content.

8
00:00:46,610 --> 00:00:56,100
So here's the div that contains the content and you can see that we've given it an I.D. of X1 that matches

9
00:00:56,910 --> 00:00:58,290
the data target.

10
00:00:58,290 --> 00:01:07,590
Just remember to keep a pound sign in front of the value so these two must match in order for this to

11
00:01:07,590 --> 00:01:07,890
work.

12
00:01:12,880 --> 00:01:22,450
In addition to the x 1 I.D. that we have here you also have to create a class and set it to collapse

13
00:01:23,470 --> 00:01:24,060
next.

14
00:01:24,070 --> 00:01:30,730
Just insert the content that should be displayed when the button is clicked so you can see we have some

15
00:01:31,030 --> 00:01:37,210
sample text here and when we click the collapse button the text appears when we cook it again it disappears

16
00:01:38,140 --> 00:01:39,460
in the second example

17
00:01:43,210 --> 00:01:49,780
we've used the eight element instead of a button element like we did in the first example.

18
00:01:51,720 --> 00:01:52,820
We can see that.

19
00:01:53,130 --> 00:02:04,560
If you want to use an element you need to set the H R you f attribute to the I.D. in your development

20
00:02:07,480 --> 00:02:10,550
so if those two don't match then the collapsible will not work.

21
00:02:10,570 --> 00:02:20,210
If you're using an element in addition to that you also need to include a data toggle equals collapse

22
00:02:20,300 --> 00:02:20,870
attribute

23
00:02:24,330 --> 00:02:27,430
and you can see that we've given the link a name.

24
00:02:27,570 --> 00:02:32,340
Simple collapsible and that's what appears on the button

25
00:02:35,620 --> 00:02:40,050
just like the previous example your content goes inside your div element.

26
00:02:41,010 --> 00:02:52,030
So here you can see the sample text in the sample text hides it appears on click.

27
00:02:52,410 --> 00:02:57,250
One thing you'll notice is that by default the text is hidden.

28
00:02:57,300 --> 00:03:01,480
If you want the text to be visible by default.

29
00:03:01,890 --> 00:03:07,350
We'll start with the first one here inside your div element next to the collapse class.

30
00:03:07,350 --> 00:03:16,590
Just put in the in the class and I'll save the file and you can see that the text is now visible by

31
00:03:16,590 --> 00:03:21,260
default and that's again that's the in class.