Okay, let's toggle the visibility of these dialogues using Alpine. This is probably the most common use case for Alpine, so let's go ahead and do it. So I'll start with this one here. And I already have Alpine installed because it comes with the Breeze scaffolding. So if you look at package.json, you'll see it installed here. And app.js, you'll see it being initialized here. You can also use the CDN if you want to do it that way, which is usually what I prefer. But since it's already installed, we don't have to do anything. Okay, so let's go back to our index.blade.php. And this one right here should be the one showing on the page.

Okay, so let's go back to our index.blade.php. And this one right here should be the one showing on the page. So if I do hidden, it should hide this one. Okay, so let's work on this one, spell back. And the first step is to find your component and then add some state to it. So in this case, it's going to be this button along with the dialog. So you have to find a root div or a root element that houses all of these. So we can put it here on the button, or we can put it on the div. I'll put it on the div here, it doesn't matter. So we can do x-data, which is our state, equals an object, and whatever state we need.

I'll put it on the div here, it doesn't matter. So we can do x-data, which is our state, equals an object, and whatever state we need. In this case, we just need to hold the visibility. So isOpen, let's say false by default. Now we want to listen for the click event. So that would be on the button itself. So let me just reinvent this. And we can do x-on:click, or we can use the short form and do @click equals, and then just set the state to whatever you want. So in our case, we can set it to true or toggle it like this.

just set the state to whatever you want. So in our case, we can set it to true or toggle it like this. Okay, and now we can use the x-show directive on the actual thing we want to show and hide. So in our case, it's this unordered list. So let's do x-show equals isOpen. And that should do the trick. So now it's hidden by default. But if I click this, it should toggle it on or off. Okay. Now, one of my favorite things about Alpine is the small little additions it adds that

Okay. Now, one of my favorite things about Alpine is the small little additions it adds that makes your life easier. For example, if you want to click away, you want this to hide as well. And we can do that using the @click. So anytime you click away from this unordered list, in our case, we want to hide it. So isOpen equals false. So now when we click away from it, it hides. Now if I refresh this page, you'll see it appear for a second there. So to get rid of that, we can use the x-cloak directive.

Now if I refresh this page, you'll see it appear for a second there. So to get rid of that, we can use the x-cloak directive. And that should hide it after we add some CSS. So let's just say x-cloak. And we just have to add some CSS here. So let's do this. And let's add this to our app.css. And let's just put it on top here. Okay. And let's save and make sure to npm run dev.

Okay. And let's save and make sure to npm run dev. And now when I refresh, you shouldn't see that anymore. Okay, and it's gone. It still works. Yep. We can also hide it with the escape key if you want to do that. So let's do that back here. So we can do, let's put it underneath here, on keyDown, we want to listen for the escape key.

So we can do, let's put it underneath here, at keydown, we want to listen for the escape key. We want it to be global on the window. So we can do .window. And we can do the same thing. So this is open equals false. So now we can hit escape to hide this. Here we go. Cool. And probably my favorite feature of Alpine is its transitions makes it that simple.

Okay. But like I said, I'm okay with the default so that we can remove that. So yeah, that's pretty much it. I just have to add these to the rest of these components. For example, on the idea page, we have to add it to all of these. So here, here, here, and here. So let's do one more together. I'm just going to copy and paste this. So this will be on the unordered list, or the thing we're trying to show and hide. So let's go to show.blade.php, or sorry, I called it show.blade.

So this will be on the unordered list, or the thing we're trying to show and hide. So let's go to show.blade. So what am I trying to show and hide? The setStatus, setStatus. So that would be this thing right here, I believe. Is it this one? Yes, it should be this one. Let's hide it to make sure. Okay. So let's add that here.

Okay. So let's add that here. So let me just read that this and let's add all of those Alpine directives here. Let's grab the button. So add click. Let's add that to the button here. So that would be this button. Let's put it right here. And we just have to define some state. So that will go on any parent div.

This is just a simple explanation with no code.

And clicking off of it works and pressing escape works. So I'm going to add the same thing for all of these dialogs here. So I'll be back in a second. Okay. So I've added it here, obviously here and here, and also one here. So I didn't add it on these because eventually it will split this up into its own component. So yeah, this looks like a good place to make a commit. So let's git add, or what episode is this? Episode seven, git commit, episode seven, dialog visibility with Alpine.

Episode seven, git commit, episode seven, dialog visibility with Alpine.