Installation

To install tab-manager globally on your computer just open terminal and run:

$ npm install tab-manager

To install it in a directory (recommended) run:

$ npm install --save tab-manager

How to use

The basics

Inside the html

To create a button for a tab just use an element with the class "tabbutton" like so:

<button class="tabbutton">Tab 1</button>
<button class="tabbutton">Tab 2</button>

To create the tab itself just use an element with the class "tabscreen" like so:

<div class="tabscreen">This is tab 1!</div>
<div class="tabscreen">This is tab 2!</div>

Finally to link a button to a tab you can give them an attribute "screen" with the same value.

The final result:

<button class="tabbutton" screen="first">Tab 1</button>
<button class="tabbutton" screen="second">Tab 2</button>

<div class="tabscreen" screen="first">This is tab 1!</div>
<div class="tabscreen" screen="second">This is tab 2!</div>

Inside the JavaScript

This is the easiest just connect a Javascript file to your html file or use the "script" tag.

Inside the JavaScript just require "tab-manager" and let it watch like this:

var tabManager = require("tab-manager");

tabManager.watch();

Done!

Further features

You can set a default tab that should be open when the page loads by giving the button the class "selected":

<button class="tabbutton selected" screen="first">Tab 1</button>

! If this is not given all tabs will be hidden until a tab button is clicked !

You can create a different style for tab-buttons when the tabs are open. tab-manager automatically gives a tab-button the class "selected" when the tab is open so it is easy to style in css:

.tabbutton.selected {
  text-decoration: underline;
}