1
00:00:00,600 --> 00:00:06,120
In this example we've created a collapsible panel when the heading is clicked.

2
00:00:06,400 --> 00:00:10,810
A panel appears it disappears when the heading is clicked again

3
00:00:13,700 --> 00:00:22,870
we can create a collapsible panel by creating a div and setting the class value to panel group inside

4
00:00:22,880 --> 00:00:28,420
that if we create another div with two classes panel in panel primary

5
00:00:32,750 --> 00:00:42,490
next we create a div with the class panel heading we can insert our title Inside this div here.

6
00:00:42,500 --> 00:00:48,290
We've used an H for element in this example it contains the class panel title

7
00:00:51,310 --> 00:00:52,900
Inside the H for element.

8
00:00:52,960 --> 00:01:00,140
We have our 8 element with a data toggle attribute set to collapse.

9
00:01:00,180 --> 00:01:09,460
We also have a H R F attribute and this is set to the name of the div that contains the panel content.

10
00:01:11,220 --> 00:01:13,680
That div can be found here.

11
00:01:13,830 --> 00:01:23,590
You can see that the I.D. matches the H R F attribute in the element.

12
00:01:23,620 --> 00:01:31,840
We also have two classes attached to this div panel collapse and collapse.

13
00:01:31,840 --> 00:01:40,280
Next we have two divs one with the panel body class and the other with the panel footer class as you

14
00:01:40,280 --> 00:01:44,820
learned earlier these contain the body content and footer content for the panel.

15
00:01:46,120 --> 00:01:51,300
You can insert whatever body content you want here in the footer content here.