Convert Sectioned Contents Into Tabs – tinytabs

Preview:

Description:

An ultra-light, zero-dependency JavaScript library that converts the long & large sectioned contents into user-friendly tabs.

The library automatically generates tab navigation from heading elements (h3) and the users are able to switch between sectioned content by clicking the tabs.

It also automatically generates hashtags from tab IDs so that you can easily and directly access to certain tabbed content through URL.

How to use it:

Add content sections to the page.

<div id="mytabs">
  <div class="section" id="example">
    <p>
     This is Tab 1
    </p>
    <h3 class="title">Tab 1</h3>
  </div>

  <div class="section" id="more">
    <h3 class="title">Tab 2</h3>
    <p>
      This is Tab 2
    </p>
  </div>

  <div class="section" id="video">
    <h3 class="title">Tab 3</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UBa-EtVvSks" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Download and insert the tinytabs’ JavaScript and CSS files into the HTML.

<link rel="stylesheet" href="src/tinytabs.css" />
<script src="src/tinytabs.js"></script>

Initialize the tabs on document ready,

document.addEventListener("DOMContentLoaded", function(e) {
  tinytabs(document.querySelector("#mytabs"));
});

Enable/disable hashtags in the URL. Default: true.

document.addEventListener("DOMContentLoaded", function(e) {
  tinytabs(document.querySelector("#mytabs"), {
    anchor: true
  });
});

Show/hide the title. Default: true.

document.addEventListener("DOMContentLoaded", function(e) {
  tinytabs(document.querySelector("#mytabs"), {
    hideTitle: true
  });
});

Default CSS selectors.

document.addEventListener("DOMContentLoaded", function(e) {
  tinytabs(document.querySelector("#mytabs"), {
    sectionClass: "section",
    tabsClass: "tabs",
    tabClass: "tab",
    titleClass: "title",
    selClass: "sel"
  });
});

Changelog:

06/21/2020

• JS update