Simple & Mobile-first Toggle Tabs – Tabby.js

Preview:

Description:

Tabby.js is a simple, lightweight JavaScript library for creating accessible, mobile-first toggle tabs with minimal effort.

How to use it:

Load the tabby.css for basic tabs styles.

<!-- Default Layout -->
<link rel="stylesheet" href="dist/css/tabby.css">
<!-- Vertical Layout -->
<link rel="stylesheet" href="dist/css/tabby-ui-vertical.css">

Create tabs and tabbed content as follow.

• data-tabs: tab container
• data-tabby-default: make a tab to be displayed on init

<div class="tabs" data-tabs>
  <button href="#tab1">Tab 1</button>
  <button data-tabby-default href="#tab2">Tab 2</button>
  <button href="#tab3">Tab 3</button>
</div>
<div class="tabs-content">
  <div class="tabs-pane" id="tab1">
    <p><strong>Tab 1 Content</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu nulla.</p>
  </div>
  <div class="tabs-pane" id="tab2">
    <p><strong>Tab 2 Content</strong></p>
    <p>Integer placerat auctor neque quis hendrerit. Vestibulum erat diam, dictum nec velit id.</p>
  </div>
  <div class="tabs-pane" id="tab3">
    <p><strong>Tab 3 Content</strong></p>
    <p>Fusce sagittis orci non tortor hendrerit, sed malesuada nisl cursus. </p>
  </div>
</div>

Or …

<ul class="tabs" data-tabs>
  <li><a href="#taba">Tab 1</a></li>
  <li><a href="#tabb">Tab 2</a></li>
  <li><a href="#tabc">Tab 3</a></li>
</ul>
<div class="tabs-content">
  <div class="tabs-pane" id="taba">
    <p><strong>Tab 1 Content</strong></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu nulla.</p>
  </div>
  <div class="tabs-pane" id="tabb">
    <p><strong>Tab 2 Content</strong></p>
    <p>Integer placerat auctor neque quis hendrerit. Vestibulum erat diam, dictum nec velit id.</p>
  </div>
  <div class="tabs-pane" id="tabc">
    <p><strong>Tab 3 Content</strong></p>
    <p>Fusce sagittis orci non tortor hendrerit, sed malesuada nisl cursus. </p>
  </div>
</div>

Initialize the toggle tabs plugin and done.

var myTabs = new Tabby('[data-tabs]');

Default options.

var myTabs = new Tabby('[data-tabs]',{
    idPrefix: 'tabby-toggle_', 
    default: '[data-tabby-default]'
});

API methods.

// toggle a specific tab
myTabs.toggle('#tab2');
// destroy the instance
myTabs.destroy();

Execute a callback each time the tab is changed.

document.addEventListener('tabby', function (event) {
  var tab = event.target;
  var content = event.detail.content;
}, false);

Changelog:

v12.0.3 (09/21/2019)

• Added fallback for Custom Event support in older browsers

v12.0.1 (03/09/2019)

• Added fallback for hidden attribute
• Totally rewritten for better a11y

08/01/2018

• Better selector support