WEBVTT

00:00:07.900 --> 00:00:13.250
In this video we get to learn how to use bootstrap to create collapsable content.

00:00:13.650 --> 00:00:21.510
So we get to create an example using a link that will expand and collapse some content and then it will

00:00:21.600 --> 00:00:24.900
create another example with a button.

00:00:25.110 --> 00:00:31.570
And finally we'll learn how to create accordions using the collapse plugin.

00:00:32.600 --> 00:00:33.360
OK.

00:00:33.360 --> 00:00:39.660
So let's go ahead and start with the link so he could create a link using the ATAC

00:00:42.870 --> 00:00:50.130
and let's find the link as a button using the buzzing clus and wasn't primary.

00:00:51.780 --> 00:00:52.050
OK

00:00:54.930 --> 00:00:59.420
then let's create the collapsible content.

00:00:59.880 --> 00:01:03.450
So you get to create a different place above grub's in its

00:01:09.620 --> 00:01:16.160
copy text from the doubly case the plugins.

00:01:16.680 --> 00:01:20.310
OK so now we've got our link of course our content.

00:01:20.490 --> 00:01:24.240
So now we need to.

00:01:24.680 --> 00:01:33.100
Well it's style the content versus using the background danger class.

00:01:34.100 --> 00:01:34.790
OK.

00:01:35.340 --> 00:01:39.460
So now we get to create the collapse functionality.

00:01:39.930 --> 00:01:48.950
So first we need to give our collapsable contents a class of collapse.

00:01:49.600 --> 00:01:58.270
And then we need to link our links to the clubs that we'll consider using on a trip.

00:01:59.230 --> 00:02:02.740
Well we'll use the ID of the collapsable code.

00:02:02.760 --> 00:02:12.670
So let's give you an ID excuse an ID of collapse 0 1.

00:02:12.690 --> 00:02:13.610
OK.

00:02:13.910 --> 00:02:24.030
But also we need a data toggle attributes as will set to collapse.

00:02:25.060 --> 00:02:28.700
So now if we click on the link you can see that it is working.

00:02:28.740 --> 00:02:33.660
We can see that the link can expand and collapse the collapsible contents.

00:02:34.290 --> 00:02:38.700
OK so this creates a similar example with a button.

00:02:38.700 --> 00:02:52.010
So it creates a button that's going to be similar to the length so that soil the person using the Person

00:02:52.020 --> 00:02:57.970
class person primary.

00:02:59.610 --> 00:03:09.270
OK let's create another div or the button collapsable conference.

00:03:09.350 --> 00:03:14.180
Let's give the lady clubs to two to signing to background.

00:03:14.230 --> 00:03:14.580
Want to

00:03:17.520 --> 00:03:22.290
change everything to 2's is OK.

00:03:22.440 --> 00:03:30.300
So that to link the button to the div rather than using the day trip as we did with links with a link

00:03:30.300 --> 00:03:30.560
.

00:03:30.690 --> 00:03:42.520
We are going to use a data targets as will be set to the ID of the collapsable content.

00:03:42.900 --> 00:03:48.330
Also we need a data table that will set to collapse

00:03:52.650 --> 00:03:55.450
and we can see that it is working.

00:03:55.760 --> 00:03:56.510
All right.

00:03:56.940 --> 00:03:57.200
OK.

00:03:57.210 --> 00:04:00.020
Now let's move to the accordion example.

00:04:00.030 --> 00:04:08.420
So we're going to create an accordion using the collapse plugin.

00:04:08.590 --> 00:04:10.370
We're going to have three sections.

00:04:10.590 --> 00:04:18.480
So each section is going to have a header ok with a link and the collapsible content is going to be

00:04:19.500 --> 00:04:21.050
a few paragraphs.

00:04:21.600 --> 00:04:33.510
OK so first we need to create a div for the accordion and give it an ID excuse to play the accordion

00:04:33.540 --> 00:04:35.470
.

00:04:37.350 --> 00:04:38.300
OK.

00:04:38.340 --> 00:04:41.640
The accordion needs a class of Bunnell group

00:04:46.230 --> 00:04:55.710
because we're going to have panels so each Bunnell a is a section with constants.

00:04:55.740 --> 00:04:57.390
So this is a puzzle.

00:04:57.690 --> 00:04:58.800
OK.

00:04:58.860 --> 00:05:00.520
This is another puzzle.

00:05:00.630 --> 00:05:03.840
So the header plus the contents gives a punch.

00:05:04.200 --> 00:05:05.240
OK.

00:05:05.280 --> 00:05:08.460
That's why the class is Palm grip.

00:05:08.460 --> 00:05:09.540
OK.

00:05:09.570 --> 00:05:21.340
So then we get to create our first panel which is the section 1 header with the first constants.

00:05:21.780 --> 00:05:24.730
So it's going to be a div of class but

00:05:30.910 --> 00:05:43.970
ok then inside the Bunnell the heading or the header is going to be a date.

00:05:45.050 --> 00:05:45.770
OK.

00:05:45.980 --> 00:05:52.850
Of class panel heading.

00:05:55.620 --> 00:05:57.830
OK.

00:05:58.070 --> 00:06:05.450
And then the content is going to be another day of class

00:06:10.040 --> 00:06:14.230
panel collapse because this is the collapsible concept.

00:06:15.530 --> 00:06:25.190
OK so let's populate the header first so we're going to place a heading H for.

00:06:26.190 --> 00:06:29.690
OK they replaced our link inside

00:06:32.510 --> 00:06:35.980
section 1.

00:06:37.750 --> 00:06:38.440
OK.

00:06:38.550 --> 00:06:46.210
And then we're going to have our content.

00:06:47.300 --> 00:06:58.730
So the content is going to be erupts again in another div which is going to take a class of Purtell

00:06:58.940 --> 00:07:01.310
body.

00:07:02.470 --> 00:07:04.760
OK and then we can place our paragraphs inside

00:07:08.580 --> 00:07:13.700
OK

00:07:14.300 --> 00:07:15.780
so we can see.

00:07:16.010 --> 00:07:20.250
Now we of course are had of course our collapsable conference.

00:07:21.080 --> 00:07:28.400
OK so now let's style this and then build the collapse functionality between the slings and the collapsible

00:07:28.400 --> 00:07:29.920
contents.

00:07:29.990 --> 00:07:33.170
So first let's tile the

00:07:40.130 --> 00:07:41.410
putto itself.

00:07:41.860 --> 00:07:45.490
OK so you going to use another class.

00:07:45.560 --> 00:07:51.270
It's going to be faunal followed by the states we want.

00:07:51.270 --> 00:07:53.970
Let's go for a little warning.

00:07:55.220 --> 00:07:58.390
OK.

00:07:58.500 --> 00:07:58.830
And

00:08:11.680 --> 00:08:18.320
we can also soil our head.

00:08:19.260 --> 00:08:27.950
So we're going to take lots of Purtell title.

00:08:28.420 --> 00:08:30.280
OK.

00:08:30.800 --> 00:08:32.060
That looks better.

00:08:32.100 --> 00:08:32.370
Great.

00:08:32.380 --> 00:08:34.820
Just a couple of play breaks before the accordion

00:08:34.820 --> 00:08:40.330
.

00:08:40.330 --> 00:08:41.920
All right.

00:08:42.890 --> 00:08:43.170
OK.

00:08:43.170 --> 00:08:46.310
That looks exactly the same though.

00:08:46.690 --> 00:08:51.030
OK , so now let's creates the functionality the club's functionality.

00:08:51.080 --> 00:08:58.190
So we get to go to the we're going to go to the collapsable content.

00:09:00.380 --> 00:09:02.230
OK.

00:09:03.270 --> 00:09:07.650
Are we going to add a class collapse.

00:09:09.020 --> 00:09:09.860
OK.

00:09:09.860 --> 00:09:10.160
And

00:09:13.430 --> 00:09:22.190
if we want the content to appear when we load the page we should add another class in there when we

00:09:22.190 --> 00:09:22.960
load the page.

00:09:22.970 --> 00:09:27.290
Does this collapsible contents mean is going to be expanded.

00:09:27.700 --> 00:09:37.700
OK all it's we need an ID for the content so that we can link link to the link.

00:09:37.700 --> 00:09:43.740
So let's go with the lady of collapse one.

00:09:44.120 --> 00:09:51.840
Now let's go to the link so let's give it.

00:09:54.470 --> 00:10:02.540
So they Tref using the ID of the clubs will continue.

00:10:03.910 --> 00:10:05.070
OK.

00:10:05.200 --> 00:10:15.370
And also let's use a data toggle as we said to collapse.

00:10:15.530 --> 00:10:22.560
And finally for accordions we are at a data parents two things.

00:10:23.500 --> 00:10:24.030
OK.

00:10:24.170 --> 00:10:27.130
Which is going to be the idea of our accordion.

00:10:28.200 --> 00:10:29.440
OK.

00:10:29.440 --> 00:10:30.020
So

00:10:34.480 --> 00:10:36.730
make sure it is working fine.

00:10:36.770 --> 00:10:37.380
So now we can.

00:10:37.450 --> 00:10:42.740
The other puzzles just by copy and pasting the same code.

00:10:43.120 --> 00:10:48.930
So let's just copy paste everything.

00:10:49.210 --> 00:10:53.630
Second panel let's copy a copy paste what the button was.

00:10:54.180 --> 00:11:03.510
OK so let's just change everything for the second panel so you change everything to lose so close to

00:11:03.520 --> 00:11:05.610
section to

00:11:11.720 --> 00:11:15.300
do the same thing for the third bottle.

00:11:15.370 --> 00:11:16.510
Everything's in threes

00:11:16.860 --> 00:11:24.200
.

00:11:24.460 --> 00:11:37.320
Hey it's also change the styling so let's have they danger with it all.

00:11:37.520 --> 00:11:46.070
And final success for the second one.

00:11:49.690 --> 00:11:59.040
Please make sure as we haven't missed anything collapse to it is nice to be two

00:12:03.760 --> 00:12:09.020
sections three columns three columns three.

00:12:09.170 --> 00:12:10.890
I missed that one.

00:12:11.940 --> 00:12:18.280
OK so everything is working though right.

00:12:21.670 --> 00:12:29.440
OK now let's have a look at some events and methods we can use with the collapse plugin.

00:12:29.710 --> 00:12:34.260
So let's create a script.

00:12:35.660 --> 00:12:44.290
Ok so first let's use the collapse method.

00:12:44.290 --> 00:12:52.030
So for example we can use the club's method to show a system collapsable content.

00:12:52.120 --> 00:12:56.770
So for example in our case when we load the page.

00:12:57.260 --> 00:13:04.620
OK so all the collapsable counters they show up because we use the class in all of them.

00:13:04.620 --> 00:13:09.830
They just take it out for the last section of the second section.

00:13:10.450 --> 00:13:21.960
OK OK so we can use the club's method to show collapsable constants.

00:13:22.280 --> 00:13:29.860
OK so let's let's do that let's place everything inside dto commensurately function first

00:13:29.860 --> 00:13:35.740
.

00:13:35.740 --> 00:13:41.830
OK so we can access the second collapsable contents.

00:13:42.310 --> 00:13:47.980
OK and we'll use the club's method to show this conference.

00:13:48.050 --> 00:13:58.900
I cannot access using the ID lookups to know that it will use the club's method.

00:13:58.890 --> 00:14:04.680
I need to give it a parameter so it's going to be show.

00:14:04.780 --> 00:14:12.790
So now if we load the page you can see that's the second you concerns Appius.

00:14:13.000 --> 00:14:15.170
OK we can do the same thing with.

00:14:15.220 --> 00:14:20.050
He said collapsable content.

00:14:22.100 --> 00:14:23.930
Now you can see those pictures.

00:14:24.610 --> 00:14:29.380
We can use other performances for example we can use Tuggle.

00:14:30.390 --> 00:14:41.180
So by using this if the collapsable contents is hidden this statement will make it appear and the same

00:14:41.250 --> 00:14:42.220
the opposite way.

00:14:42.460 --> 00:14:46.450
OK so for example if we change our class

00:14:51.520 --> 00:14:54.690
in the collapsible content.

00:14:55.710 --> 00:15:03.020
OK the glove it's the third collapsable sense and we use the toggle barometer.

00:15:03.140 --> 00:15:07.080
Then it will just reverse this and it's going to be hidden.

00:15:08.130 --> 00:15:11.760
OK let's try.

00:15:14.680 --> 00:15:17.910
OK so we can see now this section 3.

00:15:17.970 --> 00:15:22.910
It appears even though it will cause the class in.

00:15:23.340 --> 00:15:25.480
OK.

00:15:25.570 --> 00:15:28.980
Now let's look quickly at events.

00:15:28.990 --> 00:15:31.280
We can use with the clubs plugin.

00:15:31.380 --> 00:15:42.940
So let's send an alert message when the club's contents for Section 1 is hidden so we can access the

00:15:43.250 --> 00:15:53.600
contents using its ID clubs one day and then we'll use the on method.

00:15:54.430 --> 00:16:00.680
So the event is going to be hidden.

00:16:00.690 --> 00:16:07.230
That's B.S. don't collapse.

00:16:07.620 --> 00:16:10.060
And the function

00:16:14.120 --> 00:16:20.720
is going to be sending an alert message.

00:16:21.250 --> 00:16:26.430
For example section 1 is.

00:16:26.840 --> 00:16:32.040
If you are in Section 1 and see the message