Skip to content

Pure vanilla javascript tabs with nesting

License

Notifications You must be signed in to change notification settings

trinione/tabbis.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tabbis

Version 3.0 - See the Changelog or version 1.

If you like Tabbis, please consider making a donation to support my work.

Tabbis

About

Really simple tabs with pure vanilla javascript, no jQuery involved. It's just 3.3 kB minified and 1.2 kB gzipped.

  • Supports old and new browsers - Has both ES5 and ES6 versions
  • Supports unlimited nesting
  • Supports keyboard navigation
  • Supports accessability with automatic aria tags
  • Supports options
  • Supports custom events
  • Supports memory using local storage (needs to be enabled in the options)

Demos

Setup

Instead of going step by step, I give you a full example.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Tabbis</title>
    <link rel="stylesheet" href="../assets/css/dist/style-default.css">
  </head>
  <body>
    <div data-tabs>
      <button>Tab1</button>
      <button>Tab2</button>
      <button>Tab3</button>
    </div>

    <div data-panes>
      <div>Pane1</div>
      <div>Pane2</div>
      <div>Pane3</div>
    </div>

    <script src="../assets/js/dist/tabbis.es5.min.js"></script>
    <script>tabbis();</script>
  </body>
</html>

For more see the more advanced examples.

Options

The function call below will not change anything compared to tabbis(), because every option is set to its default value.

tabbis({
  keyboardNavigation: true,
  memory: false,
  paneGroup: '[data-pane]',
  prefix: '',
  tabActive: '[data-active]',
  tabActiveFallback: 0,
  tabGroup: '[data-tabs]',
  trigger: 'click'
});
Option Default Description
keyboardNavigation true Enable or disable keyboard navigation
memory false The local storage name. To disable memory you can set it to false. If you set true it will use tabbis as storage name
paneGroup '[data-pane]' A selector for Tabbis to know where your panes are located.
prefix '' By default Tabbis adds ids to the tabs and panes like tab-0-0 and pane-0-0. In case of collision you can add a prefix.
tabActive '[data-active]' You can add data-active to the tab that you want to be active on first load.
tabActiveFallback 0 If no tab is selected on load it will fall back to the first tab. To not select any tab on load set this to false
tabGroup '[data-tabs]' A selector to know where your tabs are located.
trigger click Change the tab trigger event to something like mouseover

Custom event

Instead of a callback, Tabbis uses a custom event that is emitted when a tab is activated.

document.addEventListener("tabbis", e => {
    let data = e.detail;
    console.log(data.tab);
    console.log(data.pane);
}, false );

Keyboard navigation

Tabbis supports keyboard navigation.

  • Arrow keys (left/right, up/down) will activate the next or previous tab to the current activated tab.
  • Tab (left/right) will jump from the active tab to the related pane or the other way around.

Memory

To make the browser remember your tab state after a page refresh, you can add memory: true or memory: 'my-storage-name'. When set to true it will use tabbis as storage name.

Accessability

Aria markup is good for accessability. It's also a great standardized way to have a relationship between the tabs and the panes. That way we don't need to reinvent the wheel.

Tabbis automatically adds aria attributes to the elements, so you don't have to.

Active tab

There are many ways to have a tab activated.

User interaction

When you click a tab or press enter on you keyboard, the current tab will be activated by default.

Memory

In case you have set memory: true, Tabbis will remember the current state of your tabs after you refresh the page.

Selector

By default you can add data-active as an attribute to the tab in a group that should be active. Tabbis will then automatically add aria-selected="true" on the active tab. However, if memory is enabled it will override this state from the memory.

Aria attribute

Not rekommended: It's possible to add aria-selected="true" to the tab in a group that should be active, instead of using data-active. However, if memory is enabled, it will override this state from the memory.

Tab index

If you have not added data-active or not added aria-selected="true" as an attribute to a tab, it will by default fallback to the first tab. You can force Tabbis to not select anything with tabActiveFallback: false.

Requirements

Tabbis is tested with the following browsers.

  • Chrome
  • Edge
  • Firefox
  • Opera

What about IE11? Help me out and try IE11 (with the ES5 version) and report the result as an issue.

FAQ

Why does Tabbis not load?

In some cases you may need to wait for the dom to load. It can be done like below.

window.addEventListener('DOMContentLoaded', () => {
  tabbis();
});

How can I trigger a tab to activate?

There is no built in feature in Tabbis to do that, but it can be done with pure javascript.

const element = document.querySelector('.my-tab');
element.click();

How can I reset the tabs memory?

One way is to use Clear Session which is a Google Chrome extension.

Why is the memory acting wierd when using tabs on multiple pages?

The memory uses a key that is bound to a domain, not a page. You should change the memory: 'tabbis' to something like memory: 'tabbis-page-about' to have a unique memory for each page type.

Disclaimer

This library is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please create a new issue.

Featured

Inspiration

Credits

License

MIT

About

Pure vanilla javascript tabs with nesting

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.8%
  • HTML 16.2%
  • CSS 7.0%