Convert Sectioned Contents Into Tabs – tinytabs

Category: Javascript | June 21, 2020
Author: knadh
Views Total: 79 views
Official Page: Go to website
Last Update: June 21, 2020
License: MIT

Preview:

Convert Sectioned Contents Into Tabs – tinytabs

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

You Might Be Interested In:


Leave a Reply