Documentation: https://github.com/alpinejs/alpine
Tutorial: https://scrimba.com/p/pdqbBcM/cdNv7mtz
<style>
[x-cloak] {
display: none;
}
</style>
<div x-data="{ tab: window.location.hash ? window.location.hash.substring(1) : 'description' }" id="tab_wrapper">
<!-- The tabs navigation -->
<nav>
<a :class="{ 'active': tab === 'description' }" @click.prevent="tab = 'description'; window.location.hash = 'description'" href="#">Description</a>
<a :class="{ 'active': tab === 'reviews' }" @click.prevent="tab = 'reviews'; window.location.hash = 'reviews'" href="#">Reviews</a>
</nav>
<!-- The tabs content -->
<div x-show="tab === 'description'">
Lorem ipsum description.
</div>
<div x-show="tab === 'reviews'" x-cloak="">
Lorem ipsum reviews.
</div>
</div>
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
{{!--Based on https://dev.to/mtownsend5512/creating-powerful-tabs-with-alpine-js-in-less-than-5-minutes-367d --}}
<style>
[x-cloak] {
display: none;
}
</style>
<div x-data="{ tab: window.location.hash ? window.location.hash.substring(1) : 'description' }"
id="tab_wrapper"
>
<!-- The tabs navigation -->
<nav>
<a :class="{ 'active': tab === 'description' }"
@click.prevent="tab = 'description'; window.location.hash = 'description'" href="#">Description</a>
<a :class="{ 'active': tab === 'reviews' }" @click.prevent="tab = 'reviews'; window.location.hash = 'reviews'"
href="#">Reviews</a>
</nav>
<!-- The tabs content -->
<div x-show="tab === 'description'">
Lorem ipsum description.
</div>
<div x-show="tab === 'reviews'" x-cloak="">
Lorem ipsum reviews.
</div>
</div>
<script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine-ie11.min.js" defer></script>
/* No context defined. */