jQuery nanoTab plug-in

Easy, Simple & lightweight jQuery Tab Plugin

by gmo lop

HTML

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<h2>jQuery nanoTab plug-in example</h2>

<ul>
    <li>@GitHub: <a href="https://github.com/gmolop/jQuery-nanoTab-Plugin">https://github.com/gmolop/jQuery-nanoTab-Plugin</a></li>
</ul>
<div class="tabs option0">
     <h3>Default config:</h3>

<pre class="prettyprint">
jQuery( selector ).nanotab();
</pre>
    <ul>
        <li>tab 1</li>
        <li>tab 2</li>
        <li>tab 3</li>
        <li>tab 4</li>
        <li>tab 5</li>
    </ul>
    <div>
         <h4>Tab 1 content</h4>

        <img src="http://lorempixel.com/output/abstract-q-c-120-60-7.jpg" alt="" align="left" />
        <p>Lorem ipsum Reprehenderit exercitation sint sunt velit reprehenderit mollit culpa magna sunt laborum ut pariatur laboris eu sed enim ut consectetur.</p>
        <p>Lorem ipsum Sit Excepteur quis laborum incididunt dolor.</p>
    </div>
    <div>
         <h4>Tab 2 content</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed voluptatum eos nisi, rem minus et omnis eius amet deleniti nostrum? Fugit excepturi saepe assumenda ratione neque facere expedita! Iusto, architecto.</p>
    </div>
    <div>
         <h4>Tab 3 content</h4>

        <img src="http://lorempixel.com/output/abstract-q-c-120-60-6.jpg" alt="" align="left" />
        <p>Lorem ipsum Reprehenderit exercitation sint sunt velit reprehenderit mollit culpa magna sunt laborum ut pariatur laboris eu sed enim ut consectetur.</p>
        <p>Lorem ipsum Sit Excepteur quis laborum incididunt dolor.</p>
    </div>
    <div>
         <h4>Tab 4 content</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nihil dolorum hic quasi, aliquid provident nobis velit, sint ducimus officiis error tempora. Ipsa, eos aspernatur hic consequatur ab, optio voluptas.</p>
    </div>
    <div>
         <h4>Tab 5 content</h4>

        <img src="http://lorempixel.com/output/abstract-q-c-120-60-4.jpg"...

CSS

html {
    -webkit-font-smoothing: antialiased;
}
body {
    background-color: #F5F5F5;
    text-shadow: 0 1px 0 #FFF;
    color: #333;
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 30px 10px 100px;
}
.tabs {
    padding: 30px;
    background-color: #FFF;
    border-radius: 5px;
    box-shadow: 0 5px 10px -5px #333;
    width: 640px;
    max-width: 100%;
    min-width: 340px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.tabs > ul {
    padding: 0;
    margin: 0;
}
.tabs > ul:after {
    float: none;
    clear: both;
    content:'';
    display: block;
}
.tabs > ul > li:first-child {
    border-top-left-radius: 5px;
}
.tabs > ul > li {
    float: left;
    height: auto;
    padding: 5px;
    margin: 0;
    cursor: pointer;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    border: 1px #f5f5f5 solid;
    border-bottom: none;
}
.tabs > ul > li:last-child {
    border-top-right-radius: 5px;
}
.tabs > ul > li:hover {
    background-color: #F5F5F5;
    border-color: #CCC;
}
.tabs > ul > li.on {
    background-color: #f5f5f5;
    color: #333;
    border-color: #ccc;
    cursor: default;
}
.tabs > div {
    display: none;
    border: 1px #ccc solid;
    padding: 10px;
    border-radius: 5px;
    border-top-left-radius: 0;
}
.tabs > div img {
    margin: 0 10px 10px 0;
}
.tabs > div.on {
    background-color: #F5F5F5;
}

JavaScript

/*!
 * @name             jQuery nanoTab Plugin
 * @Description      Easy, Simple & lightweight jQuery Tab Plugin
 * @author           gmo
 * @version          1.0 [aug/14]
 * @proyect          https://github.com/gmolop/jQuery-nanoTab-Plugin
 * @JSfiddle         http://jsfiddle.net/gmolop/ej7h80yj/embedded/result/
 * @Original Size    2.89KB uncompressed - commented
 * @Compiled Size    285 bytes gzipped (no style, no comments) [Compiled with http://closure-compiler.appspot.com/]
 * @copyright        none, use as you want
 *
 * @changelog        v1.0 - Initial release
 */
(function(b){b.fn.nanotab=function(a){a=b.extend({_default:0,_effect:null,_speed:0},a);var e=b(this).children("ul").children("li"),g=b(this).children("div"),c=a._default,f=a._effect,d=a._speed;e.click(function(){e.removeClass("on");var a=g.eq(b(this).index()),c=g.not(b(a)).removeClass("on"),a=a.add(b(this)).addClass("on");"showHide"==f||null===f?(null===f&&(d=0),c.hide(d),a.show(d)):(a.slideDown(d),c.slideUp(d))});null!==c&&e.eq(c).click()}})(jQuery);

// Default config:
jQuery('.tabs.option0').nanotab();

// Custom config example 1:
var option1 = {
    '_default' : 1,
    '_effect'  : 'showHide',
    '_speed'   : 'fast'
};
jQuery('.tabs.option1').nanotab( option1 );

// Custom config example 2:
var option2 = {
    '_default': 2,
    '_effect' : 'slide',
    '_speed'  : 'slow'
};
jQuery('.tabs.option2').nanotab( option2 );