Tabbed feature for jQuery


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. (function($){ $.fn.tabisha = function(o){
  2. var o = $.extend({
  3. activeClass: 'active',
  4. items: '.item',
  5. clickThings: 'ul.nav li a'
  6. }, o);
  7.  
  8. // Loop through each in case there are multiple selected
  9. return $(this).each(function(){
  10. var that = $(this),
  11. item = $(that).find(o.items),
  12. clickThings = $(that).find(o.clickThings);
  13.  
  14. // no point doing anything if here is only 1 item
  15. if (2 > item.length) return;
  16.  
  17. // Hide all but the first
  18. item.hide().eq(0).show();
  19. clickThings.eq(0).parent().addClass(o.activeClass);
  20.  
  21. // Loop through each clickthings
  22. clickThings.each(function(i){
  23.  
  24. // Apply click event to the clicky item
  25. $(this).click(function(){
  26. // Sets active state
  27. $(this).parent().siblings().removeClass(o.activeClass);
  28. $(this).parent().addClass(o.activeClass);
  29.  
  30. //that.hide().show();
  31. item.hide().show();
  32. //clickThings.hide().show();
  33.  
  34. // Show the right content
  35. item.hide().eq(i).show();
  36.  
  37. return false;
  38. });
  39. });
  40.  
  41. });
  42.  
  43. }})(jQuery);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.