Skip to content

Latest commit

 

History

History

old

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Tabbis 1.0 (old version)

New version 2.0 can be found here

Really simple tabs with pure vanilla javascript.

Features

  • Tiny filesize
  • Simple setup
  • Remember tabs
  • Callback support
  • Unlimited tab sets
  • Unlimited nesting

Also

  • No jQuery
  • No bloat
  • No hash

Preview

Tabbis

Install

Install by the simple OR the advanced setup depending on your needs.

Simple setup

Scripts: Add this just before </body>:

<script src="tabbis.js"></script>
<script>
  var tabs = tabbis.init();
</script>

Stylesheet: Add this before </head>:

<link rel="stylesheet" href="css/tabby.css" />

Html: Add this somewhere after <body>:

<div data-tabs>
  <div>Tab1</div>
  <div>Tab2</div>
  <div>Tab3</div>
</div>

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

Advanced setup

Memory

By design, when using the tabs they are save in your localStorage. If you reset the browser the tabs will still be open where you left them.

Requirements

A modern browser.

Tested with:

  • Chrome
  • Firefox
  • Edge

Disclaimer

This plugin 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.

License - MIT

https://opensource.org/licenses/MIT

Featured

Credits