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.