JustTabs

A simple and lightweight tab plugin

Overview

• No dependencies. The library is written in pure JavaScript and requires no additional dependencies.

• Simplicity and functionality. Easily integrate and use the library to implement essential tab functionality.

• Accessibility. The plugin follows all accessibility best practices.

• CSS customization. Modify the appearance and layout effortlessly using CSS.

Installation

1. Download the JS library just-tabs.min.js and the stylesheet just-tabs.min.css from the dist folder. Alternatively, install via NPM:

npm i justtabs

2. Include the files in your project:

<link rel="stylesheet" href="just-tabs.min.css">
<script src="just-tabs.min.js"></script>

Or (for module bundlers):

import 'justtabs/dist/just-tabs.min.css';
import JustTabs from 'just-tabs';

3. Add the following HTML structure:

<div data-jtabs="tabs">
  <ul data-jtabs="nav">
    <li>
      <button type="button"
              data-jtabs="control">Tab 1</button>
    </li>
    <li>
      <button type="button"
              data-jtabs="control">Tab 2</button>
    </li>
    <li>
      <button type="button"
              data-jtabs="control">Tab 3</button>
    </li>
  </ul>
  <div>
    <div data-jtabs="panel">Content 1</div>
    <div data-jtabs="panel">Content 2</div>
    <div data-jtabs="panel">Content 3</div>
  </div>
</div>

The data-jtabs attribute is essential for plugin functionality.

4. Initialize the library:

new JustTabs( 'tabs' );

Plugin Configuration

The JustTabs constructor accepts two arguments:

• Required: A name (string) for the tab instance.
• Optional: A configuration object.

Features

1. Set an active tab on load by specifying startTabIndex:

new JustTabs( 'tabs', {
	startTabIndex: 1
} );

2. Programmatically switch tabs using the switchTo method (pass the target tab index):

const tabs = new JustTabs( 'tabs' );
tabs.switchTo( 2 );

3. Retrieve configuration via getOptions():

const tabs = new JustTabs( 'tabs' );
tabs.getOptions(); // Returns full config object
tabs.getOptions('el'); // Returns the root HTML element

4. Callback on initialization (onInit):

new JustTabs( 'tabs', {
	onInit: ( tabs ) => {
		console.log( tabs );
	}
} );

5. Callback on tab switch ( onSwitch):

new JustTabs( 'tabs', {
	onSwitch: ( tabs ) => {
		console.log( tabs );
	}
} );