Well Tabber

Tiny Native JavaScript tabs plugin

Download for FREE

See it in Action

Play around with the demo

Example 1: Only tabs, no navigation arrows

Main characteristics Documents Ad description
  • TAB 1

    Calculs vasculaires

    ..............................................................

    Oui

  • Taille de l'écran

    .....................................................................

    Oui

  • Portable ou Stationnaire

    ..................................................

    Stationnaire

  • Nombre de connecteurs de sonde

    ...............................

    3

  • TAB 2

    Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Sit Amet Anoni

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Nizoma adem into rails

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Semo demo text

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Ipsume

  • TAB 3

    Switszherglasse Innorect

    _________________________________________________

    Zinder Hause

  • Laimune lecross Deus

    ____________________________________________

    Cortana New Lorem

  • Siri indul onore int

    ______________________________________________

    Qvasar intor

  • Zovbiescy onotr ocsorf

    ______________________________________________

    Imuter oxored

new WellTabber("[data-aimNoNavAr]", "[data-targetNoNavAr]", "active");

Example 2: Tabs with navigation arrows

Main characteristics Documents Ad description
  • TAB 1

    Calculs vasculaires

    ..............................................................

    Oui

  • Taille de l'écran

    .....................................................................

    Oui

  • Portable ou Stationnaire

    ..................................................

    Stationnaire

  • Nombre de connecteurs de sonde

    ...............................

    3

  • TAB 2

    Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Sit Amet Anoni

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Nizoma adem into rails

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Semo demo text

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Ipsume

  • TAB 3

    Switszherglasse Innorect

    _________________________________________________

    Zinder Hause

  • Laimune lecross Deus

    ____________________________________________

    Cortana New Lorem

  • Siri indul onore int

    ______________________________________________

    Qvasar intor

  • Zovbiescy onotr ocsorf

    ______________________________________________

    Imuter oxored

var tabberWithTabs = new WellTabber("[data-aimNoNavAr]", "[data-targetNoNavAr]", "active");
tabberWithTabs.activateNavArrow(".infoNavL",".infoNavR");

Example 3: Horizontal orientation

Main characteristics Documents Ad description
  • TAB 1

    Calculs vasculaires

    ..............................................................

    Oui

  • Taille de l'écran

    .....................................................................

    Oui

  • Portable ou Stationnaire

    ..................................................

    Stationnaire

  • Nombre de connecteurs de sonde

    ...............................

    3

  • TAB 2

    Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Sit Amet Anoni

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Nizoma adem into rails

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Semo demo text

  • Lorema Ipsuma Dolor

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

    Ipsume

  • TAB 3

    Switszherglasse Innorect

    _________________________________________________

    Zinder Hause

  • Laimune lecross Deus

    ____________________________________________

    Cortana New Lorem

  • Siri indul onore int

    ______________________________________________

    Qvasar intor

  • Zovbiescy onotr ocsorf

    ______________________________________________

    Imuter oxored

new WellTabber("[data-aimNoNavAr_V]", "[data-targetNoNavAr_V]", "active");

How to Use

Step 1. Lets see some code

To get started you'll have to include WellTabber.js and tabs styles from this examples (if you want) examplesTabsStyles.css files in your html file.

Feel free with css, if you want - make you own tabs styles.
<link rel="stylesheet" href="examplesTabsStyles.css">
<script type="text/javascript" src="WellTabber.js"></script>

After this you'll have to intialize this plugin, as shown in the example above

Step 2. Set up your HTML

You just need to create some tabs and content to each of these, so when you clicked on some tab - element with content of these tab will be showed. You must keep to only rule: 1 tab = one element with content.

Example 1 html (no navigation arrows, only tabs)

 <div class="tabsDemoBox">

     <div class="infoNav">
        <span class="active aim" data-aimNoNavAr="tab_1">Main characteristics</span>
        <span class="aim" data-aimNoNavAr="tab_2">Documents</span>
        <span class="aim" data-aimNoNavAr="tab_3">Ad description</span>
    </div>

    <div class="tabsBox">
        <ul class="detailTab active" data-targetNoNavAr="tab_1">
                CONTENT 1
        </ul>

        <ul class="detailTab" data-targetNoNavAr="tab_2">
                CONTENT 2
        </ul>

        <ul class="detailTab" data-targetNoNavAr="tab_3">
                CONTENT 3
        </ul>
    </div>

</div>

Attention!! You must set some class|id or data-attribute to your tabs, and elements with content. In this example I use attribute names, and they must be the same in the group. Nav tabs must have the same name attribute. Elements of the containers like nav tabs - the same name attribute.

In this example, nav tabs have an data-attr like: data-aimNoNavAr and elements with content - data-targetNoNavAr

The values of this attribute must be in this format: attr value of nav tab attribute = attr value of corresponding element with content. Like this:
data-aimNoNavAr="tab_1 (this is nav tabs attribute) data-targetNoNavAr="tab_1" (this is attribute of element with content )

Example 2 html (with navigation arrows)

 <div class="tabsDemoBox noNavArr">

     <div class="infoNav">
        <span class="infoNavL" ></span>
		
        <span class="active aim" data-aimNoNavAr="tab_1">Main characteristics</span>
        <span class="aim" data-aimNoNavAr="tab_2">Documents</span>
        <span class="aim" data-aimNoNavAr="tab_3">Ad description</span>
    
		<span class="infoNavR" ></span>
    </div>

    <div class="tabsBox">
        <ul class="detailTab active" data-targetNoNavAr="tab_1">
                CONTENT 1
        </ul>

        <ul class="detailTab" data-targetNoNavAr="tab_2">
                CONTENT 2
        </ul>

        <ul class="detailTab" data-targetNoNavAr="tab_3">
                CONTENT 3
        </ul>
    </div>

 </div>

Step 3. Initialize the plugin

The plugin takes the following parameters.
(Because the plugin is a "class", you must call him via new)

Param Override Type Details
nav Mandatory String Selector for tabs navigation elements. Format must match style of CSS selectors (".class" or "#id"). For data-attr - use style of JS spec.
target Mandatory String Selector for tabs with content. Format must match style of CSS selectors (".class" or "#id"). For data-attr - use style of JS spec
favoriteClass Mandatory String Class that apply to nav and target elements when you choose one of them.

Methods for navigation arrows

If you want to use some navigation arrows you can call this method

Method Description
activateNavArrow

Activate navigation arrows functionality. Takes the following parameters.

tabberInstance.activateNavArrow(leftArrowSel,rightArrowSel);

Where leftArrowSel is css selector for left arrow, and rightArrowSel for right arrow.
You can see this in Example №2 that exactly with navigation arrows.