Thursday, 14 May, 2020 UTC


Summary

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`. We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.