Alright, so this is just taking off from the last lesson.
This is the exact example from the last lesson.
So we have a button and a box,
and when we save and refresh the page,
this is what we have here.
Now, I'm going to make sure that this box is actually hidden by default,
I'm going to use display non-block, but display none.
That box doesn't show up.
It's just, it's there,
it's in the DOM, but it's just invisible.
So what we can do is when we click this button instead of hide, we can do dots show.
And this is really important too.
Let's keep an eye on this down here, let's refresh this page.
And down here we're going to see display block.
And so it automatically assumed it was a block element and went for display block.
And so it just showed the element.
And actually I shouldn't say height up here,
so it's a show element.
Show that element.
There we go.
That's all there is to it.
Nice and sweet. It's a lot like hide and show.
So we have hide to hide something and then show to show something.
Now as the full example,
we could select id.
Click Me, that's going to select this button.
Let's write the, the old way we could do function.
And this is just different syntax and we're using the dot on syntax usually,
but we can do a click event here.
Then we could select that box and not hide it, but we could show it.
And it works for us every single time.
Go ahead and give that a shot when you are done,
we are going to get into something a little more fun.
We're going to start adding CSS classes to our elements.
So when you click a button,
we can add a class to the element to make it look a little bit different.