Tabzy.js

A lightweight and simple tab library built with pure JavaScript.
View on GitHub

Try It Out

Tabzy is a lightweight tab library built with pure JavaScript. (Source code available on GitHub)

Here are some examples of how to use Tabzy:

1. Basic Tabs Demo

Welcome to Tab 1! This is the first tab.

2. Persistent Tabs Demo

Latest news updates from around the world.

3. Sliding Line Tabs Demo

Welcome to the Home tab!

Installation

Method Steps
Direct Download Download ZIP

Simply extract the ZIP file and use the tabzy.min.js and tabzy.min.css files in your project.

Tabzy provides a small CSS file that you can include directly via a CDN link. This makes it easy to integrate into your project and customize as needed.

Include the Tabzy JavaScript file in your project:

<script src="https://cdn.jsdelivr.net/gh/ngokha437/tabzy@v1.0.0/tabzy.min.js"></script>
You can use the released versions of Tabzy available here.

Usage

Here’s the basic HTML structure you’ll need to set up Tabzy:

<ul id="my-tabs">
    <li><a href="#panel1">Tab 1</a></li>
    <li><a href="#panel2">Tab 2</a></li>
</ul>
<div id="panel1">Content 1</div>
<div id="panel2">Content 2</div>

And here’s how you can use it with JavaScript:

// Initialize a new tab instance
const tabs = new Tabzy('#my-tabs', {
    activeClassName: 'tabzy--active',
    remember: true, // Keeps the active tab in the URL
    onChange: function({ tab, panel }) {
        console.log(`Switched to ${tab.textContent}`);
    }
});

// Switch to a specific tab
tabs.switch('#panel2');

// Destroy the tab instance
tabs.destroy();

Options

Option Type Description
activeClassName string CSS class applied to the active tab (default: 'tabzy--active')
remember boolean Persists the active tab state in the URL (default: false)
onChange function A callback function that runs whenever the active tab changes. It receives an object with two properties: tab (the DOM element of the newly active tab) and panel (the DOM element of the corresponding content panel). By default, it’s set to null, meaning no action is taken unless you define a function.

API

Method Description
switch(input) Switches to a specific tab based on the provided input. The input can be either: (1) a string representing the href attribute of a tab (e.g., '#panel2'), or (2) a DOM element that is one of the tab links (e.g., an <a> element from the tabs list).
destroy() Removes all Tabzy functionality, restores the original HTML, and unbinds events.