Advanced Search

Tabbed feature for jQuery

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

Expand | Embed | Plain Text

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.