Posted By

flicity on 08/10/10


Tagged

jquery tabs


Versions (?)

tabs


 / Published in: jQuery
 

Creates tabbed items from a list

  1. <div class="tab-holder">
  2. <div class="tab">
  3. <h2>Tab header 1</h2>
  4. <p>tab content</p>
  5. </div>
  6. <div class="tab">
  7. <h2>Tab header 2</h2>
  8. <p>tab content</p>
  9. </div>
  10. <div class="tab">
  11. <h2>Tab header 3</h2>
  12. <p>tab content</p>
  13. </div>
  14. </div>
  15.  
  16.  
  17. //tabs
  18. $.fn.contentTabs=function(){
  19. this.each(function(){
  20. if($(this).hasClass("hide-headers")){$(".tab > :header:first-child", this).hide();}
  21.  
  22. $(this).addClass("tab-active").prepend('<ul class="tab-nav clearfix" />');
  23.  
  24. for(var i=0; i<$("> div", this).size(); i++){
  25. $(".tab-nav", this).append('<li><a href="#">'+$("> div:eq("+i+") :header:first-child:eq(0)", this).text()+'</a></li>');
  26. $("> div:eq("+i+")",this).addClass("tab-"+i);
  27.  
  28. $(".tab-nav li:eq("+i+")", this).click(function(e){
  29. $(this).addClass("active").siblings().removeClass("active");
  30. var $id = $(this).parent().children("li").index(this);
  31. $(this).parents(".tab-holder").children(".tab").addClass("hide").end().children(".tab:eq("+$id+")").removeClass("hide");
  32. return false;
  33. });
  34. }
  35. $(".tab-nav li:eq(0)", this).addClass("active");
  36. $("> div", this).addClass("hide");
  37. $("> div:eq(0)", this).removeClass("hide");
  38. });
  39. return this;
  40. };

Report this snippet  

You need to login to post a comment.