Usually with a library like Alpine, you want to hide and show things based on a state, whether that's you want to click to reveal a drop-down menu or click to reveal some kind of text.

And that's exactly what we're going to look at now. So we're going to kind of dive into events on our click events, things like that. But let's look at a really simple example to start with.

Once again, we're going to go ahead and create just a standard div here. We're going to initialize this with x data. And we're going to have our object inside of here.

And this is going to be a Boolean, which is called visible. So something needs to be shown based on this value. Alpine does have if statements, but usually they

are a very specific use case. What you'd normally want to do is use x show. So let's go ahead and create another div inside of here with some content.

And we want to show this based on that Boolean value. So what we'd do is we would use x show. And then again, we can put any expression inside of here. This doesn't have to just reference

a value from the local scope. So for example, we could just write x show visible. Now obviously, if we go over, that's false at the moment. So it's not going to be shown.

You will see a slight flicker here. Don't worry about that too much at the moment. We'll talk about that later. But if we change this over to true and come back over,

sure enough, that is always shown now. So let's look at an example of using a slightly different value inside of here. So for example, let's just say we

had a list of records that we'd pulled in from an API or something like that. And we'll be touching on that later. We want to only show these records

and iterate through them if these records actually have some kind of content. So for example, rather than just referencing records, we could just pass the length of this in here and even

a more complex expression like greater than or equal to 1. If we come over, sure enough, we see that some content in there. And of course, we get the flicker of the other one. But don't worry too much about that.

So let's just comment that out while we're here. So there we go. We see that. And of course, if records was completely empty,

we would expect not to see that until we got them fetched in. So now that we know how to actually get that working, let's look at a click event so we can actually see this work by clicking something.

So again, we're going to go ahead and use xdata here. We're going to have visible. Or in our case, we might naturally call this show. So we're going to say show false.

We're going to have some content in here which depends on that. So we're going to say show this content in here if that's true. Of course, at the moment, it doesn't show because it's false. And then we want some kind of button or anchor in here

which, when we click it, shows that content. So let's just write show inside of here. And now with this button, what we want to do is modify the value of show.

What Alpine will then do is react to the change of this, and it will show this. So let's go ahead and see how this works. Let's say x on, and then we're going

to go ahead and give the event, the JavaScript event. In this case, it's click. So let's go ahead and say show equals true. So we're reassigning the value show inside of xdata to true.

And when that happens, that's going to go ahead and refresh everything. And you can see, sure enough, when I click that, we show the content.

Now with this, you can build up some pretty powerful features. So for example, we could take this, and I'm just going to duplicate this down here so we've got a reference to it.

We could toggle this instead. So let's just say that this was to toggle something like a menu bar. Well, in this case, we want to assign it

to the opposite of what show currently is. So we can just say not show. So if this is true, that will be false. If it's false, that will be true.

So now if we come over and give this a refresh, we can click on this to actually toggle the content. Let's take a look at a slightly more complex example. So again, let's comment this out and just paste

what we had down here. And let's just say that we had a number in here that we wanted to increment. Let's say by default, that was maybe 0.

And we wanted to show that increment value in here. We're going to use xtext. And we're going to reference the number. So we don't actually need any content inside of here.

We'll, of course, just show the value that we currently have. So at the moment, it looks something like that. Now, for this button here, we actually want to increment, not toggle this.

So to increment this, let's think about what we've already learned. x on click does something. So easily, what we can do now is just say number plus plus

or number equals number plus 1 or whichever increment you're going for. That's going to go ahead and increment that value. What we can now do, though, is we

could create another div down here. And we could say x show. And we could show a message if this number is big, for example. So we could say, well, if the number is greater than or equal

to 10, we might want to show that's a big number, for example. Silly example, but hopefully you get the point. So if we go ahead and increment this all the way up,

that's going to not only increment this, but react to the fact that that value has changed. And it's going to show a different message. So really, just with a few lines of code

here and some really simple JavaScript expressions and event handlers, we've created something that would traditionally be quite difficult to do with JavaScript on its own.