EZ Tabs jQuery Plugin

EZ Tabs was designed to help you design tabbed content boxes following a few simple steps. It is a free plugin. myjqueryplugins.com/jquery-plugin/ez-tabs-jquery-plugin

by gk

HTML

<script src="http://dcoder.eu/eztabs/js/jquery.eztabs.min.js"></script>
<script src="//fonts.googleapis.com/css?family=Roboto:400,500,700&#39;"></script>
<div class="tabset">
    <ul class="nav">
        <li>Lorem ipsum</li>
        <li>Venenatis</li>
        <li>Maecenas</li>
        <li>Cras cursus</li>
    </ul>
    <div class="tabs_content">
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
        </article>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
        </article>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui. Nam scelerisque elit vitae lacus gravida, eget sodales nibh faucibus. Nulla elit sapien, molestie in mattis eget, consectetur vitae ipsum. Donec ut placerat magna, ut sodales tortor. Sed quis turpis tincidunt, fringilla felis ut, venenatis nisi. Proin egestas viverra nulla, nec dignissim nisi molestie eget.</p>
        </article>
       ...

CSS

/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 700);
 body {
    font-family:'Open Sans', Arial, sans-serif;
    font-size: 12px;
}*/
.tabset {
    max-width: 500px;
    margin: 10px auto;
    /*-moz-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, .15);*/
}
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*border: 1px solid #ccc;*/
    border-bottom: none;
    height: 30px;
    /*-webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    background: #ffffff;
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -webkit-linear-gradient(#ffffff 0%, #e5e5e5 100%);
    background: -o-linear-gradient(#ffffff 0%, #e5e5e5 100%);
    background: linear-gradient(#ffffff 0%, #e5e5e5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);*/
}

ul.nav li {
    float: left;
    padding: 0 8px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    /*border-right: 1px solid #ccc;*/
}

ul.nav li.active {
    /*border-bottom: 1px solid #fff;*/
    background: #fff; 
}

.tabs_content {
    background: #fff;
    /*border: 1px solid #ccc;*/
    padding: 10px 10px 0 10px;
  ...

JavaScript

$('.tabset').eztabs({
     fullWidthTabs: false,
     tabsList: '.nav',
     boxContainer : '.tabs_content',
     animation : 'none'
 });

//  Before edit:
//  animation : 'slideUpDown'

//  Source:
//  myjqueryplugins.com/jquery-plugin/ez-tabs-jquery-plugin