Tabbed Content:
Part III, Animated Toggle

Now that we've both constructed and styled our content tabs, it's finally time to make it tabable. With a little jQuery, we'll create a simple animation so we can toggle our tabs.
Toggle Content Function
For this particular layout, a simple hide/show content function will definitely suffice.
$(document).ready(function(load){
$('nav.toggler a').live('click',toggle_content);
function toggle_content(e){
$('nav.toggler a').removeClass('current');
$(this).addClass('current');
$('section#players section').removeClass('current');
$('section#players section:eq(' + $(this).index() + ')').addClass('current');
}
});
Advanced Toggle Content Function
Alright, so despite my statement about how a simple show/hide function would suffice, let's add a sleek fade in/out to the animated content tab. I've already shown you how to create a fixed jQuery fade in/out functions, so let's implement it!
$(document).ready(function(load){
$('nav.toggler a').live('click',toggle_content);
function toggle_content(e){
var $new_section
= $('section#players section:eq(' + $(this).index() + ')');
$('nav.toggler a').removeClass('current');
$(this).addClass('current');
$('section#players section.current').fade_out(250,function(){
$('section#players section.current').removeClass('current');
$new_section.fade_in(250,function(){
$new_section.addClass('current');
});
});
return false;
}
});
So that wraps up the tutorial series on Tabbed Content. Hopefully, you now know how to implement content tabs and you can modify these examples to your project needs.