Tably.js

Try It Out

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

• No dependencies
• Fully customizable with CSS
• Supports URL state persistence
• Simple and intuitive API
• Lightweight and optimized

Here are some examples of how to use Tabzy:

1. Basic Tabs Demo

2. Persistent Tabs Demo

3. Sliding Line Tabs Demo

Installation

Method	Steps
Direct Download	Download ZIP Simply extract the ZIP file and use the tably.min.js and tably.min.css files in your project.

Tably 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 Tably JavaScript file in your project:

<script src="https://cdn.jsdelivr.net/gh/minh2004a/Tably@v1.0.1/tably.min.js"></script>

You can use the released versions of Tably available here.

Usage

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

<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 Tably('#my-tabs', {
    classActive: 'tably--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
classActive	string	CSS class applied to the active tab (default: 'tably--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 Tably functionality, restores the original HTML, and unbinds events.