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
2. Persistent Tabs Demo
3. Sliding Line Tabs Demo
Method | Steps |
---|---|
Direct Download |
Download ZIP
Simply extract the ZIP file and use the
|
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.
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();
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.
|
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. |