As I promised in previous video, I'm going to show you how to hide and hide items from the note list
at first.
Let's see how it works.
We have here the finished version of our project.
So when we click on hide notes, then the items are disappeared and also the text height is replaced
into unhide.
And when we click on Unhide Notes, the items appear on the list again.
OK, let's go back to Brackett's and take a look on file, we have here development with Edelheit list,
and it contains two elements label and input.
As you see, the input has the type checkbook's and it's hidden by default from Keith's file.
This checkbox is used to manage different conditions for items.
As you already know, when four attribute insider, label, tag and ID of input elements have the same
values, then clicking on label element is enough in order to check the box.
For clearness and for better understanding, I'm going to disable display and property from successful,
so let's go to Taldo.
Cassettes and comments display none property out.
Then go back to script or just file at first.
I'm going to write the comics.
We are starting the next part, so right here, hide items in order to hide list items on click event,
we need to attach an event listener to input element, but at first we have to select it.
So.
Right, variable hide item.
Equals document that gets element by ID, you know, that input element has edelheit, so let's pass
it here, right.
Hide.
And then I'm going to attach an event listener to input elements, right, hide item dot at about listener.
That indicate the click event and also created a function.
As usual, let's test it in castles, right, castle, that loch.
Checked.
Reload, then click on High notes and you see that it works.
OK, let's move on and on Kalik Hyde list items for that I'm going to use if conditional statements
we need to hide list items when the checkbook's will be checked.
I'm going to use another term property called Checked, which checks if the input is checked and returns
the boolean value.
So right.
If and then as a condition.
Right height item dot checked.
So when the checkbox is checked, then this condition becomes true and we need to indicate the proper
state of the list items in this case, we need to hide them.
Therefore, I'm going to use school property and then display none for you element, which was defined
on global level at the beginning of this project.
So.
Right, you will dot style.
That display equals Deunan.
Reload, click on Hydes, so checkboxes checked and you see that list items are hidden, but if we click
back on high notes that nothing will happen in order to appear again list items, we have to write our
statement right else.
And in our statement, we need to define display property as block.
So right.
You will dot style.
Dot display.
Equals to block.
Reload, then click, so the items are hidden and when we click back, they appear again.
OK, the next thing we need to do is to change the tax content of the labor element.
I mean, to change hyd into unhide when we click on label before that, we need to select label element,
but we need to write it above if statement.
So create a variable label Ecorse, document thoughts and use your Quarrie selector method.
And he said the parenthesis, right label.
Now, inside the if statement, we have to set tax content off label as unhide notes, so right label
dot tax content.
Equals to unhide notes.
Reload.
From the label element has content as high notes, so when we click on label, text content will be
changed into unhide notes and when we click back, the items will appear, but label will maintain its
content as unhide notes again.
So in order to fix that, I'm sure that you already guessed what to do.
We simply need to change text content again inside our statement.
So right.
Label dot text content.
Equals to high notes.
Reload, then click, and you see that it works.
All right, so we are almost done.
And the last thing that I'm going to do is to hide Checkbook's again from success.
Let's go to Standard Xerces file and remove the comments from display property, then reload again.
And here we go.
That's it.
The only thing that we have to do is to program, search, filter.
So see you in the next video.