1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    alpineAlpine.js

    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.