[Mise] Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

Posted 2021-02-19 Answer1215

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 ofactiveTabon click, and usex-showto 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 activeTab.

 

<div x-data="{activeTab: 0}">
  <div>
     <!-- :class: means bind to class attr, just like [ngClass] in Angular-->
    <button @click="activeTab = 0" :class="{‘active‘: activeTab === 0}">Tab 1</button>
    <button @click="activeTab = 1" :class="{‘active‘: activeTab === 1}">Tab 2</button>
    <button @click="activeTab = 2" :class="{‘active‘: activeTab === 2}">Tab 3</button>
  </div>
  <div>
    <div x-show="activeTab === 0"><p>I am the content of tab number one, and I think I just won! ??</p></div>
    <div x-show="activeTab === 1"><p>Heya! I root for number two, and so should you! ??</p></div>
    <div x-show="activeTab === 2"><p>Haha nice one, but I am number three, and now it‘s all about me! ??</p></div>
  </div>
</div>