WEBVTT 00:01.510 --> 00:08.200 As I promised in previous video, I'm going to show you how to hide and hide items from the note list 00:08.620 --> 00:09.130 at first. 00:09.140 --> 00:10.320 Let's see how it works. 00:10.330 --> 00:12.910 We have here the finished version of our project. 00:13.630 --> 00:20.410 So when we click on hide notes, then the items are disappeared and also the text height is replaced 00:20.410 --> 00:21.330 into unhide. 00:21.910 --> 00:26.260 And when we click on Unhide Notes, the items appear on the list again. 00:27.290 --> 00:37.940 OK, let's go back to Brackett's and take a look on file, we have here development with Edelheit list, 00:38.540 --> 00:41.300 and it contains two elements label and input. 00:42.560 --> 00:47.990 As you see, the input has the type checkbook's and it's hidden by default from Keith's file. 00:48.500 --> 00:52.310 This checkbox is used to manage different conditions for items. 00:53.510 --> 01:00.260 As you already know, when four attribute insider, label, tag and ID of input elements have the same 01:00.260 --> 01:05.180 values, then clicking on label element is enough in order to check the box. 01:06.360 --> 01:13.340 For clearness and for better understanding, I'm going to disable display and property from successful, 01:14.040 --> 01:15.980 so let's go to Taldo. 01:15.990 --> 01:21.780 Cassettes and comments display none property out. 01:24.990 --> 01:28.420 Then go back to script or just file at first. 01:28.440 --> 01:29.760 I'm going to write the comics. 01:32.600 --> 01:41.090 We are starting the next part, so right here, hide items in order to hide list items on click event, 01:41.100 --> 01:48.530 we need to attach an event listener to input element, but at first we have to select it. 01:49.010 --> 01:49.250 So. 01:49.250 --> 01:51.800 Right, variable hide item. 01:55.060 --> 02:05.050 Equals document that gets element by ID, you know, that input element has edelheit, so let's pass 02:05.050 --> 02:06.110 it here, right. 02:06.130 --> 02:06.550 Hide. 02:09.190 --> 02:18.130 And then I'm going to attach an event listener to input elements, right, hide item dot at about listener. 02:21.490 --> 02:25.780 That indicate the click event and also created a function. 02:29.250 --> 02:35.070 As usual, let's test it in castles, right, castle, that loch. 02:38.210 --> 02:38.720 Checked. 02:40.720 --> 02:46.690 Reload, then click on High notes and you see that it works. 02:47.800 --> 02:54.790 OK, let's move on and on Kalik Hyde list items for that I'm going to use if conditional statements 02:55.600 --> 02:59.110 we need to hide list items when the checkbook's will be checked. 03:00.130 --> 03:07.120 I'm going to use another term property called Checked, which checks if the input is checked and returns 03:07.120 --> 03:08.040 the boolean value. 03:08.530 --> 03:09.430 So right. 03:09.430 --> 03:12.550 If and then as a condition. 03:12.550 --> 03:14.800 Right height item dot checked. 03:18.340 --> 03:24.490 So when the checkbox is checked, then this condition becomes true and we need to indicate the proper 03:24.490 --> 03:28.230 state of the list items in this case, we need to hide them. 03:28.810 --> 03:35.890 Therefore, I'm going to use school property and then display none for you element, which was defined 03:35.890 --> 03:38.530 on global level at the beginning of this project. 03:38.950 --> 03:39.220 So. 03:39.220 --> 03:41.380 Right, you will dot style. 03:43.030 --> 03:47.410 That display equals Deunan. 03:50.870 --> 04:01.130 Reload, click on Hydes, so checkboxes checked and you see that list items are hidden, but if we click 04:01.130 --> 04:08.900 back on high notes that nothing will happen in order to appear again list items, we have to write our 04:08.900 --> 04:11.420 statement right else. 04:12.770 --> 04:17.320 And in our statement, we need to define display property as block. 04:18.530 --> 04:19.190 So right. 04:19.190 --> 04:21.050 You will dot style. 04:22.190 --> 04:23.480 Dot display. 04:26.260 --> 04:27.280 Equals to block. 04:29.940 --> 04:37.240 Reload, then click, so the items are hidden and when we click back, they appear again. 04:38.320 --> 04:43.830 OK, the next thing we need to do is to change the tax content of the labor element. 04:44.190 --> 04:51.630 I mean, to change hyd into unhide when we click on label before that, we need to select label element, 04:52.290 --> 04:55.110 but we need to write it above if statement. 04:55.500 --> 05:03.630 So create a variable label Ecorse, document thoughts and use your Quarrie selector method. 05:06.870 --> 05:09.810 And he said the parenthesis, right label. 05:12.160 --> 05:21.130 Now, inside the if statement, we have to set tax content off label as unhide notes, so right label 05:21.130 --> 05:22.840 dot tax content. 05:26.620 --> 05:28.810 Equals to unhide notes. 05:30.780 --> 05:31.320 Reload. 05:32.830 --> 05:40.930 From the label element has content as high notes, so when we click on label, text content will be 05:40.930 --> 05:49.210 changed into unhide notes and when we click back, the items will appear, but label will maintain its 05:49.210 --> 05:50.840 content as unhide notes again. 05:51.970 --> 05:55.860 So in order to fix that, I'm sure that you already guessed what to do. 05:56.410 --> 06:00.570 We simply need to change text content again inside our statement. 06:01.360 --> 06:02.050 So right. 06:02.050 --> 06:04.150 Label dot text content. 06:06.260 --> 06:08.330 Equals to high notes. 06:10.580 --> 06:15.840 Reload, then click, and you see that it works. 06:17.300 --> 06:20.850 All right, so we are almost done. 06:20.870 --> 06:25.610 And the last thing that I'm going to do is to hide Checkbook's again from success. 06:26.120 --> 06:35.170 Let's go to Standard Xerces file and remove the comments from display property, then reload again. 06:36.530 --> 06:37.550 And here we go. 06:38.950 --> 06:39.500 That's it. 06:40.660 --> 06:44.260 The only thing that we have to do is to program, search, filter. 06:44.710 --> 06:46.450 So see you in the next video.