Well Tabber

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

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

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.

If you need a nice smooth scroll, then I advise you to try this scroll, it is made using javascript.