When it comes to tabs, the internet is full of them but most do the same thing, they switch from one tab to another and for this reason most of them use a lot of useless code. Here’s the simplest way of getting a functioning tab system, using only jQuery and CSS3. It doesn’t get any lighter than this!

First off, we’ll begin with the HTML.

<div class="content">
 <ul class="tabs">
    <li class="tab-link current" data-tab="tabs-1">Tab 1</li>
    <li class="tab-link" data-tab="tabs-2">Tab 2</li>
 </ul>

 <div id="tabs-1" class="tab-content current">
    <div class="tab-elements">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
       nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
 </div>
 <div id="tabs-2" class="tab-content">
    <div class="tab-elements">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
       incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
       nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
 </div>
</div>

We’ll be wrapping the tabs inside a content tag, you can do it in whatever tag you wish. The purpose of this being so you can use multiple variations on one page. We’ll be targeting the tab contents with JS

Each list has a data-tab. The tab itself which points to will have the id identical to the data-tab.

Let’s add the JS

$('ul.tabs li').click(function(){
 var tab_id = $(this).attr('data-tab');
 //Removing Activation of Tab
 $(this).parent().parent().find('ul.tabs li').removeClass('current');
 $(this).parent().parent().find('.tab-content').removeClass('current');
 //Adding Activation to Tab
 $(this).addClass('current');
 $("#"+tab_id).addClass('current');
})

The JS targets the lists on click, then gets the data-tab number. After doing so, the current class gets removed off the active tab and gets added to the one you clicked. So what is the current class? The current class animates everything, using CSS3. It would be easier to use slideToggle() or toggleFade()? Yes it would, but then we wouldn’t have access to Hardware accelerated animations, which make a huge difference on mobile devices.

 $(this).parent().parent().find('.tab-content').removeClass('current');
 //Adding Activation to Tab
 $(this).addClass('current');
 $("#"+tab_id).addClass('current');
})

Let’s add the CSS

ul.tabs{
 margin: 0px;
 padding: 0px;
 list-style: none;
 margin-bottom:-5px;
}
ul.tabs li{
 background: none;
 display: inline-block;
 padding: 10px 15px;
 cursor: pointer;
 transition: all 250ms ease-out;
}

ul.tabs li.current{
 transition: all 250ms ease-out;
}

.tab-elements{
 overflow:hidden; 
 padding:15px;
}

.tab-content{
 max-height:0px;
 overflow:hidden;
 transition: all 250ms ease-out;
}

.tab-link em{ 
 font-style:normal; 
 padding-left:10px;
}

.tab-content.current{
 max-height:500px;
 display: inherit;
 transition: all 250ms ease-in;
 transition-delay: 250ms;
}

The most important aspect is the tab-elements. This is set to overflow:hidden so when the height gets switched by the current class it will increase the height without showing the content in. The current class also has a delay set to it, in order for a nifty little animation to occur!

Now, all you have to do is use it and abuse it to your likes! We won’t be adding a download button, since you can copy and paste the code and also get to read it and understand it. We’re coding with the simplest of words for classes just to not overly complicate things!

If you’re looking for a Mobile and Tablet website that has this feature already implemented together with another few thousands, we have a portfolio full of them and also, a live store where you can easily browse through things!