Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/alpine-tabs.html

Last active December 17, 2022 10:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save w3collective/242151c61c32b673fe8b854e6ef4ce79 to your computer and use it in GitHub Desktop.
Save w3collective/242151c61c32b673fe8b854e6ef4ce79 to your computer and use it in GitHub Desktop.
Download ZIP
Tabbed content component using Alpine.js
Raw
alpine-tabs.html
<!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
Copy link
Author

Source => https://w3collective.com/alpine-tab-component/

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