node package manager


HTML UI Toolkit tabs component


HTML UI Toolkit tabs component - Create interactive tabs in JS.

Check out the example!

<div id="my-tabs" class="hut-tabs">
    <ul class="tabs-list">
    <div class="tabs-section">
        General boring information here...
    <div class="tabs-section">
        such tabs
    <div id="kittens" class="tabs-section">
        I can haz tabs?
var tabs = require('hut-tabs');
var myTabs = tabs(document.querySelector('#my-tabs'));
// Select the first tab;
// Select the kittens tab'#kittens'));

Creates a new tabs component and attaches the event handlers. It will return a new Tabs object. The first tab is automatically selected.

The DOM node for the currently selected .tabs-section, or null if no section is selected.

Selects a tab section. If section is a number, it will select the section at that index (for example will select the first section). If section is a DOM element, it will select the section with element. The element must be one of the .tabs-section elements.

Triggered when a new section is selected. section will be the DOM node for the selected .tabs-section.

To change the style, change the variables defined in the variables.css file or override the styles with your own.