Basic Clean Tabbed Content Plugin In Pure JavaScript – Tabed.js

Category: Javascript | January 9, 2019
Author: svichas
Views Total: 77
Official Page: Go to website
Last Update: January 9, 2019
License: MIT

Preview:

Basic Clean Tabbed Content Plugin In Pure JavaScript – Tabed.js

Description:

Tabed.js is a minimal clean tabs plugin that automatically generates a tabs navigation to switch between tabbed content.

See also:

How to use it:

Install the Tabed.js with NPM.

# NPM
$ npm install tabed --save

Or directly include the JavaScript and CSS files on the page.

<link rel="stylesheet" href="dist/tabed.min.css">
<script src="dist/tabed.min.js"></script>

Create the tabbed content and specify the tab names displayed in the navigation tabs.

<div class="tabed">
  <div class="tab" data-title="Tab 1">
    Tab Content 1
  </div>
  <div class="tab" data-title="Tab 2">
    Tab Content 2
  </div>
  <div class="tab" data-title="Tab 2">
    Tab Content 3
  </div>
</div>

Initialize the tabed library and done.

new Tabed(".tabed");

Specify which tab should be opened on page load.

new Tabed(".tabed", {
    tabOpen: 2 // 2 = tab 3
});

You Might Be Interested In:

Leave a Reply