Tabify, a jQuery plugin

Présentation

Thinking outside the box (also thinking out of the box[1][2] or thinking beyond the box) is a metaphor that means to think differently, unconventionally, or from a new perspective. This phrase often refers to novel or creative thinking. The term is thought to derive from management consultants in the 1970s and 1980s challenging their clients to solve the "nine dots" puzzle, whose solution requires some lateral thinking.

Markup example

Here is a Tabify basic HTML markup

						
<body>

  <div class="js-tab-wrapper">
    <div class="js-tab">
      <h2 class="js-tab-title">Title</h2>
      <div class="js-tab-content">
        <p>Content</p>
      </div>
    </div>
    <div class="js-tab">
      <h2 class="js-tab-title">Title</h2>
      <div class="js-tab-content">
        <p>Content</p>
      </div>
    </div>
    <div class="js-tab">
      <h2 class="js-tab-title">Title</h2>
      <div class="js-tab-content">
        <p>Content</p>
      </div>
    </div>
  </div>

</body>

How to use

You can simply call the plugin and let the magic works.

						
$(document).ready(function(){

  $('.js-tab-wrapper').tabify();
  
});

Or you can pass your own options to customize the magic.

						
$(document).ready(function(){

  $('.js-tab-wrapper').tabify({
    tabSelector : '.js-tab',
    tabTitleSelector : '.js-tab-title',
    tabContentSelector : '.js-tab-content',
    tabContentHasMaps : false,
    onBuildCallback : function( api ){},
    changeCallback : function( api ){},
    api : false
  });
  
});

Api & options

Available options

Key	Default value	Description
tabSelector	'.js-tab'	desc
tabTitleSelector	'.js-tab-title'	desc
tabContentSelector	'.js-tab-content'	desc
tabContentHasMaps	false	desc
api	false	desc

Available callback

Key	Default value	Description
onBuildCallback	function( api ){}	Desc
changeCallback	function( api ){}	Desc