Simple Tabs
Simple Tabs with jQuery
Working Example
http://jsfiddle.net/gregbabula/7L2Yx/
jQuery
//G5 Tabs
var g5Tabs = function(){
//Store Variables
var $tabs = $('.tabs'),
$tabLink = $tabs.find('.headlink'),
$tabContent = $tabs.find('.tab-content article');
//Show First Section
$tabContent.first().fadeIn('slow').addClass('active');
//Tab Functionality
$tabLink.on('click', function(event){
var _this = this,
_li = $(_this).parent();
if ( !_li.is('.active') ) {
_li.addClass('active').siblings('li').removeClass('active');
$tabContent.hide().removeClass('active').eq(_li.index()).fadeIn('slow').addClass('active');
};
event.preventDefault();
});
};
//Ready
$(document).ready(function(){
//Init. G5 Tabs
g5Tabs();
});
Written by Greg Babula
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Html5
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#