Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tabbed content component using Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alpine.js Tab Component</title>
<script defer src="https://unpkg.com/alpinejs"></script>
</head>
<body>
<div x-data="{ tab: 'description' }">
<nav>
<a :class="{ 'active': tab === 'description' }" x-on:click.prevent="tab = 'description'" href="#">Description</a>
<a :class="{ 'active': tab === 'dimensions' }" x-on:click.prevent="tab = 'dimensions'" href="#">Dimensions</a>
<a :class="{ 'active': tab === 'reviews' }" x-on:click.prevent="tab = 'reviews'" href="#">Reviews</a>
</nav>
<div x-show="tab === 'description'">
<h3>Description</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec neque rhoncus eros molestie iaculis fermentum ac lacus.</p>
</div>
<div x-show="tab === 'dimensions'">
<h3>Dimensions</h3>
<p>Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus faucibus.</p>
</div>
<div x-show="tab === 'reviews'">
<h3>Reviews</h3>
<p>Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum. Quisque interdum dui et molestie tristique.</p>
</div>
</div>
</body>
</html>
@w3collective

This comment has been minimized.

Copy link
Owner Author

@w3collective w3collective commented Sep 29, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment