EZ Tabs jQuery Plugin (version)

by gk

HTML

<div class="tabbed">
    <ul class="tabbednav">
        <li><a href="#">Description</a></li>    
        <li><a href="#">Delivery</a></li>
        <li><a href="#">Composition</a></li>
    </ul>
    
    <div class="articlesContainer">
        <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>
        
        <article>
           <ul>
                <li>Cotton 80%</li>
                <li>Cotton 10%</li>
                <li>Elastan 10%</li>
            </ul>
        </article>
    </div>    
</div>

CSS

body {
    font-family: Arial;
}

.tabbed {
    max-width:500px;
    -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.tabbednav {
    list-style-type:none;
    margin:0;
    padding:0;
    height:31px;
    border-bottom: 1px solid #ccc;
    display: flex;
}

ul.tabbednav li {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */ 
    flex: 1;
}
ul.tabbednav li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color:#777;
    font-size: 12px;
    font-weight: 600;
    padding: 0 8px;
    height:30px;
    line-height:30px;
    border: 1px solid #ccc;
    -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: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /*...

JavaScript

function TabbedNav() {
  // Select all the articles and hide them
  var allArticles = $('div.articlesContainer').children('article');
  $(allArticles).hide();  
  // Show the first article
  $(allArticles[0]).show();

 // Add class "active" to first tab
 var allTabs = $('ul.tabbednav').children('li');
 $(allTabs[0]).addClass('active'); 

  $('ul.tabbednav li a').each(function (index) {
      $(this).click(function (event) {
          event.preventDefault();

          // Add class "active" to clicked tab
          $(this).parent().addClass('active');

          // Remove class "active" from all other tabs
          $('ul.tabbednav li a').not(this).parent().removeClass('active');

          // Active article
          var activeArticle = $(allArticles[index]);

          // Hide all articles
          $('div.articlesContainer article').hide();

         // Show active article
          $(activeArticle).show();
      });
  });
}
TabbedNav();