Tabbed Content:
Part III, Animated Toggle

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.

  1. $(document).ready(function(load){
  2.  
  3. $('nav.toggler a').live('click',toggle_content);
  4.  
  5.  
  6.  
  7. function toggle_content(e){
  8.  
  9. $('nav.toggler a').removeClass('current');
  10. $(this).addClass('current');
  11.  
  12. $('section#players section').removeClass('current');
  13. $('section#players section:eq(' + $(this).index() + ')').addClass('current');
  14.  
  15. }
  16.  
  17. });

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!

  1. $(document).ready(function(load){
  2.  
  3. $('nav.toggler a').live('click',toggle_content);
  4.  
  5.  
  6.  
  7. function toggle_content(e){
  8.  
  9. var $new_section= $('section#players section:eq(' + $(this).index() + ')');
  10.  
  11.  
  12. $('nav.toggler a').removeClass('current');
  13. $(this).addClass('current');
  14.  
  15.  
  16. $('section#players section.current').fade_out(250,function(){
  17.  
  18. $('section#players section.current').removeClass('current');
  19.  
  20.  
  21. $new_section.fade_in(250,function(){
  22.  
  23. $new_section.addClass('current');
  24.  
  25. });
  26.  
  27. });
  28.  
  29.  
  30. return false;
  31.  
  32. }
  33.  
  34. });

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.

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 1 Total Responses