Simple & Mobile-first Toggle Tabs – Tabby.js

Category: Javascript , Recommended | September 21, 2019
Author: cferdinandi
Views Total: 2,368
Official Page: Go to website
Last Update: September 21, 2019
License: MIT

Preview:

Simple & Mobile-first Toggle Tabs – Tabby.js

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

You Might Be Interested In:


Leave a Reply