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 usex-show
to determine if the tab content should be visible or not, based on the value ofactiveTab`.
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