Okay, let's talk about hiding elements.
So first things first,
I'm going to need to show you what I have on my page.
I have this box on my page,
and it's just a 100 by 100 black box.
And this is the CSS for width 100,
height one, height 100,
background color is black.
That's it. And then I've got a button that says click me.
And then I'm actually just applying the box using CSS here.
And whenever we click this button,
let's make this box hide.
And so we need an event listener for this.
Let's go ahead and select that button by its ID. Click me.
Dot on.
Click. Function.
We can pass an E or event and do e dot prevent default if we wanted to,
if this was in a form that would be useful.
Currently, this is not useful because it's not inside of a form.
But if it was, you know, this is a good measure to take.
And then we can select that box.
You can select that box.
And you can see because this is jQuery VS Code
is adding all sorts of things and we're not going to go through all of this.
There's a lot in here, but what we want to do is select
this box and we want to hide this box.
And that's all we're going to do.
So when I refresh this page,
boom, hides it, gonna refresh again.
And let's see what happens in our elements here.
This box right in here,
this is important to pay attention to at the bottom here.
It simply does it display none.
That's all it does.
So if you want to hide certain things,
you can do that with selector dot height.
Now we simply wrap this in an event listener,
in a click event listener.
So we said, whenever you click that button,
then select the box and hide it.
We don't have to do that. We can do it right when the page loads as well.
So when we load the page,
you can see that it flashes because in
our source code it shows up and we know it's going to show up in our source code.
It's gonna flash and then jQuery is gonna kick in and it's gonna say,
oh, actually, let's get rid of it. Let's hide it.
We're not deleting it from the DOM.
We're making sure that we can still access it later.
So it's not being removed,
it's not being deleted, it's simply being hidden.
What I'd like you to do is go ahead and give that a shot,
but I want you to write an event listener with it.
Let's get used to writing event listeners because that's what jQuery is all about.
It's all about event listeners.
So right, an event listener on a button,
whenever you click that button, hide the box.
When you were done that, in the next lesson,
we are going to go and make that box visible again.