Alright, let's move on and discuss how to toggle visibility. Now, this may seem trivial to you, but if you think about it, so many of the bread and butter interactions that all sites share, whether modals or dropdowns or tabs or menus, so many of those can be reduced to simple visibility toggling. Hide the dropdown, then show it. Hide the modal, then show it. Hide the menu, then show it. Hide the tab, then show it. So we can allow for that. Let's go ahead and register a component scope with simple state.

So we can allow for that. Let's go ahead and register a component scope with simple state. By default, we'll set show to false. So now I can say, bind the visibility of this h1 to that property, and whether or not it's truthy. Alright, so if I switch to Chrome, sure enough, we don't see anything, and we wouldn't expect to. But of course, if we toggle that to true, we do see it. Okay, so now let's add a button to toggle that. Button, and as you learned in the first episode, we can register an event listener like this,

Okay, so now let's add a button to toggle that. Button, and as you learned in the first episode, we can register an event listener like this, or you can swap this out with the @ symbol. Register an event listener on the button, and when it is clicked, I'm going to update the show property to true. Now when we do, this changes, Alpine detects that, and it re-renders the DOM. Okay, so now we'll say toggle, and if we give it a run, we click it, and we see the heading. So again, very simple, but you're going to reach for this all the time. However, in our case, I called it toggle, but if I click it again, it doesn't disappear. Alright, here's another pattern.

However, in our case, I called it toggle, but if I click it again, it doesn't disappear. Alright, here's another pattern. Set show equal to the opposite of what it currently is. If it's true, make it false. If it's false, make it true. So now, show, hide, show, hide. Okay, why don't we update the text of the button to make it a little more clear. I can say xText for this button, and let's do a quick check. If show is truthy, then we want to hide it, right? Hide.

However, we're not locked into simple Booleans. So for example, if I wanted to set up some tabs, alright, well, rather than show, it's more like I need to know what the current tab is, right? So let's create a few. We'll say firstTab, and then I'll do another one, secondTab, and the thirdTab. secondTab, thirdTab. Okay, well of course, at the moment, all three of those tabs are going to display. But why don't we make it conditional? Only show this tab if the current tab is, and you can use an integer here, you could have tabOne, tabTwo, tabThree, or you can use named tabs.

Second tab, third tab. Okay, so now we just need buttons to toggle the value for the current tab. And actually, real quick, let's do this. Maybe this whole thing will be wrapped in a div, and that way, I don't have tailwind here. Let's just say border 1px dotted gray, maybe padding all around, just something to make it resemble a very rough tab. Okay, so let's add some buttons above it. We'll do that right here. We'll have one button to represent each tab, the first tab, the second tab, and the third.

It looks pretty rough, but it works. Second, third. So we built a tabbing system in 30 seconds. So why don't we, let's do this. Let's add a little margin-top, and then add a little styling to make it clear which button you've currently clicked. We could say right here, I'll show you how to add a conditional class. We can use an object syntax here. Again, very similar to view. So I could say add a class of currentTab if the currentTab is equal to third.

Again, very similar to view. So I could say add a class of currentTab if the currentTab is equal to third. So this has no relation to the property. So I could say, you know, active. Actually, let's do active just to make sure there's no mental overlap there. Let's do it up here, style, add an active class, and it doesn't matter, just color blue, something like that. Okay, so now if I give it a refresh, click on the third tab, and we have some feedback there. So let's just do the exact same thing for these.