Simple & Mobile-first Toggle Tabs – Tabby.js

Category: Javascript | March 9, 2019
Author: cferdinandi
Views Total: 2,165
Official Page: Go to website
Last Update: March 9, 2019
License: MIT

Preview:

Simple & Mobile-first Toggle Tabs – Tabby.js

Description:

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

How to use it:

Load the tabby.css for basic tabs styles.

<link rel="stylesheet" href="dist/css/tabby.css">

Create tabs and tabbed content as follow.

<div class="tabs">
  <button data-tab="#tab1">Tab 1</button>
  <button data-tab="#tab2">Tab 2</button>
  <button data-tab="#tab3">Tab 3</button>
</div>
<div class="tabs-content">
  <div class="tabs-pane active" 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">
  <li><a data-tab="#taba" href="#taba">Tab 1</a></li>
  <li><a data-tab="#tabb" href="#tabb">Tab 2</a></li>
  <li><a data-tab="#tabc" href="#tabc">Tab 3</a></li>
</ul>
<div class="tabs-content">
  <div class="tabs-pane active" 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.

tabby.init();

Changelog:

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