WEBVTT 00:00:07.380 --> 00:00:14.950 In this video we're going to learn how to use the query you are to create accordions was an accordion 00:00:14.940 --> 00:00:15.670 . 00:00:15.670 --> 00:00:25.680 The accordion is a set of documents sections each section consisting of a header and some content inside 00:00:25.740 --> 00:00:27.370 a diff. 00:00:27.990 --> 00:00:32.260 These sections they can be collapsed and expanded as we like. 00:00:32.700 --> 00:00:33.460 OK. 00:00:33.870 --> 00:00:39.670 So first we will create the accordion inside the Facebook div.. 00:00:39.900 --> 00:00:45.110 So the accordion needs to be contained inside a div. 00:00:45.370 --> 00:00:45.960 OK. 00:00:46.140 --> 00:00:52.590 So our TV is going to be the Facebook Dave and we are going to be creating our sections so each section 00:00:52.590 --> 00:00:59.340 consists of a header and a date. 00:01:00.630 --> 00:01:06.340 OK so let's put some text there. 00:01:06.360 --> 00:01:16.110 So Section 1 and let's have a paragraph inside the div sane content one for example. 00:01:16.120 --> 00:01:23.880 So we're just going to copy paste these so that we have a second section and a third section so Section 00:01:23.900 --> 00:01:29.430 2 to Section 3 content 3. 00:01:30.370 --> 00:01:31.310 OK. 00:01:31.690 --> 00:01:34.820 Now to create the accordion. 00:01:34.860 --> 00:01:43.920 We are going to write some code so we will need to access the containing div which is Facebook and we 00:01:43.920 --> 00:01:47.270 will use the accordion method. 00:01:48.500 --> 00:01:49.130 OK. 00:01:49.620 --> 00:01:55.670 So if we refresh the page now so we can see those We've got an accordion. 00:01:56.110 --> 00:01:56.600 OK. 00:01:56.640 --> 00:02:00.690 And we can expand and collapse the sections as we like. 00:02:00.720 --> 00:02:05.350 Only think we will change the styling of Facebook. 00:02:05.760 --> 00:02:11.360 So we need to set the height to otos so that it looks better. 00:02:11.450 --> 00:02:12.770 OK. 00:02:13.170 --> 00:02:21.410 All right now we're going to have a look at some of the options of the accordion method. 00:02:21.450 --> 00:02:26.750 First we notice that if we expand a certain section we cannot compose collapses. 00:02:26.880 --> 00:02:34.140 OK so one way of doing that is making sure that we can collapse all the sections is by using an option 00:02:34.160 --> 00:02:42.510 is called collapsable And if we set it to true we can make sure that all the sections they are we can 00:02:42.510 --> 00:02:44.290 collapse all of them basically. 00:02:44.810 --> 00:02:45.180 OK. 00:02:45.210 --> 00:02:47.760 So basically we can collapse everything. 00:02:48.450 --> 00:02:50.020 OK. 00:02:50.130 --> 00:02:51.650 There is another thing we can look out. 00:02:51.690 --> 00:02:57.610 It's the icons that show next to the head is sort of the way in which you can see the default icon. 00:02:57.610 --> 00:03:03.840 So it changes depending on whether the section is open or closed. 00:03:04.200 --> 00:03:07.620 We can change those using or not. 00:03:07.710 --> 00:03:09.270 Another option is called icons 00:03:12.980 --> 00:03:21.510 and we need to specify a couple of things here so we need to tell the browser what icon we need to use 00:03:21.510 --> 00:03:31.770 for the section for the header when it's collapsed and that one is going to be head to the next one 00:03:33.630 --> 00:03:36.980 is going to be header or active header 00:03:40.650 --> 00:03:52.260 which will tell what's icon we use when the section is expanded to use icons we can go to the theme 00:03:52.440 --> 00:03:53.030 roller. 00:03:53.070 --> 00:03:57.760 And if you scroll down you can see a list of icons there. 00:03:58.160 --> 00:04:00.490 And you can just choose any icon you want. 00:04:01.020 --> 00:04:06.570 So if we choose for example the header as this one 00:04:11.900 --> 00:04:13.950 plays well it's 00:04:21.190 --> 00:04:23.910 just it's the name of the icons. 00:04:24.760 --> 00:04:30.250 I can circle her to. 00:04:30.960 --> 00:04:36.000 OK we don't need the dots for the class we just need the name of the icon. 00:04:36.250 --> 00:04:39.660 OK the next one is Simula. 00:04:39.660 --> 00:04:41.700 The only thing about changed is the last letter. 00:04:41.700 --> 00:04:45.630 So we'll just use the last letter to S.. 00:04:47.100 --> 00:04:51.410 OK. 00:04:53.800 --> 00:04:56.010 Let's refresh and make sure it's working. 00:04:56.130 --> 00:04:59.570 Yes it is working so now we're using the new icons. 00:04:59.580 --> 00:05:01.200 OK. 00:05:01.640 --> 00:05:01.950 OK. 00:05:01.950 --> 00:05:03.110 So one other thing. 00:05:03.690 --> 00:05:08.170 Let's make the contents of the first section bigger. 00:05:08.190 --> 00:05:17.310 So if we add more content in there it's just see what happens. 00:05:22.360 --> 00:05:24.560 So if we expand the section we can see those. 00:05:24.630 --> 00:05:26.570 It sure is showing that all the contents. 00:05:26.740 --> 00:05:34.920 And also if we expand the next section actually shows the content or a section and some white space 00:05:34.930 --> 00:05:35.630 here. 00:05:35.640 --> 00:05:42.600 So is what's happening here is that all the sections they show the same heights of the biggest one which 00:05:42.610 --> 00:05:43.550 is this one. 00:05:44.300 --> 00:05:46.970 So to avoid that there is an option we can use. 00:05:47.460 --> 00:05:49.290 We can set the 00:05:54.810 --> 00:06:10.700 height style to content so height style set to content and though we will see that's the section that 00:06:10.740 --> 00:06:13.490 will take as much space as they need. 00:06:13.890 --> 00:06:15.180 OK. 00:06:16.770 --> 00:06:18.890 OK. 00:06:20.430 --> 00:06:21.710 All right. 00:06:21.730 --> 00:06:25.610 Now we'll have a look at something else. 00:06:25.690 --> 00:06:34.330 We'll just place the accordion inside a note containing another containing div so that we can resize 00:06:34.440 --> 00:06:35.830 the decoding. 00:06:36.020 --> 00:06:36.530 OK. 00:06:36.940 --> 00:06:38.060 So we're going to do so. 00:06:38.060 --> 00:06:41.560 Are we going to place the Facebook div inside another day. 00:06:41.580 --> 00:06:48.740 So it is going to cut all the section was in sight and you did 00:06:51.420 --> 00:06:53.500 OK. 00:06:55.080 --> 00:06:58.170 Let's give this Dave an ID. 00:06:58.560 --> 00:07:01.530 We're going to call it resizing. 00:07:01.930 --> 00:07:02.450 OK. 00:07:02.600 --> 00:07:03.420 We want that. 00:07:03.450 --> 00:07:04.990 Want to be resizable. 00:07:05.380 --> 00:07:11.580 And also going to give it a class as it's a containing div we're going to go and have a look at the 00:07:11.760 --> 00:07:14.080 classes we can use for containing divs. 00:07:14.130 --> 00:07:16.050 We're going to go to the API documentation 00:07:18.970 --> 00:07:30.490 and if you go to theming CS's framework we can see here a list of styling of classes we can use for 00:07:30.540 --> 00:07:31.780 different elements. 00:07:31.840 --> 00:07:38.010 If you look at the containers there are a few ones here and we're going to go for this one. 00:07:38.100 --> 00:07:40.630 So if you use that one. 00:07:41.250 --> 00:07:43.090 OK. 00:07:43.770 --> 00:07:45.940 Now OK. 00:07:46.140 --> 00:07:51.470 Now we going to write some javascript code so that we can make the containing div resizable. 00:07:51.490 --> 00:07:59.470 So if you've ever done in the resizable session so you can access the data you want to make resizable 00:07:59.470 --> 00:08:01.830 using its ID for its phrases. 00:08:01.960 --> 00:08:06.990 In our case it is resizing. 00:08:07.690 --> 00:08:13.100 And we only use the method resizable. 00:08:14.990 --> 00:08:16.220 OK. 00:08:16.250 --> 00:08:23.650 Now he's resizable then want to make sure that once we resize the containing div the accordion just 00:08:23.640 --> 00:08:25.920 refreshes and takes the new dimensions. 00:08:26.160 --> 00:08:33.530 So we going to use an option inside the resizable method and this option is going to be precise. 00:08:33.580 --> 00:08:37.980 So we need to know what's what happens once we resize the containing. 00:08:38.640 --> 00:08:40.880 And what we need to place here is a function. 00:08:41.380 --> 00:08:49.110 So it's going to happen is once the div is resized this dysfunction is going to be executed. 00:08:50.380 --> 00:08:58.020 So the statesman's we need inside the function is to access the Facebook div which contains the accordion 00:08:58.810 --> 00:09:05.260 and we're going to use the accordion method but this time we're going to use another barometer inside 00:09:05.250 --> 00:09:06.110 the accordion. 00:09:06.120 --> 00:09:08.380 It's called refresh. 00:09:08.380 --> 00:09:16.920 What's happening is once we resize the containing div the dimensions of the accordion are going to change 00:09:16.960 --> 00:09:19.820 according to the resized containing div. 00:09:20.130 --> 00:09:21.390 OK. 00:09:22.080 --> 00:09:24.700 So let's try that. 00:09:26.470 --> 00:09:26.920 OK. 00:09:27.370 --> 00:09:35.020 So the reason we're seeing here is because we don't have the proper Heights tile values so if we said 00:09:35.010 --> 00:09:36.600 that to fill 00:09:39.930 --> 00:09:47.980 now we can see that if we resize the containing div we can see that's the according gets resized accordingly 00:09:48.000 --> 00:09:49.300 . 00:09:49.750 --> 00:09:50.070 OK 00:09:50.100 --> 00:09:56.510 .