Simple Fast Vanilla JavaScript Tabs

Views Total:0 views
Official Page:Go to website
Last Update:January 19, 2021


Simple Fast Vanilla JavaScript Tabs


A simple, lightweight, blazing-fast tabs vanilla JavaScript library for the web.

How to use it:

1. Add the JavaScript vanilla-js-tabs.js and Stylesheet vanilla-js-tabs.css to the page.

<link rel="stylesheet" href="" />
<script src="vanilla-js-tabs.min.js"></script>

2. The required HTML structure for the tabs.

<div class="js-tabs" id="tabs">
  <ul class="js-tabs__header">
    <li><a class="js-tabs__title" href="">Tab 1</a></li>
    <li><a class="js-tabs__title" href="">Tab 2</a></li>
    <li><a class="js-tabs__title" href="">Tab 3</a></li>
  <div class="js-tabs__content">
    <h1>Tab 1</h1>
  <div class="js-tabs__content">
    <h1>Tab 2</h1>
  <div class="js-tabs__content">
    <h1>Tab 3</h1>

3. Initialize the tabs plugin.

var tabs = new Tabs({
    elem: "tabs"

4. Determine which tab should be open on page load.

var tabs = new Tabs({
    elem: 'tabs',
    open: 2

5. Open a specific tab.;

6. Update the tabs.


7. Destroy the instance.


Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.