Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Tabbed content component using Alpine.js
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alpine.js Tab Component</title>
<script defer src=""></script>
<div x-data="{ tab: 'description' }">
<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>
<div x-show="tab === 'description'">
<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 x-show="tab === 'dimensions'">
<p>Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus faucibus.</p>
<div x-show="tab === 'reviews'">
<p>Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum. Quisque interdum dui et molestie tristique.</p>
Copy link

w3collective commented Sep 29, 2021

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