Posted By

digitalclubb on 12/15/11


Tagged

element jquery tabs tabbed


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Balamir
spee66
BrockSamsom


jQuery Tabbed Element for multiple elements


 / Published in: jQuery
 

A clean and simple jQuery function for creating a tabbed element. This one allows multiple tabbed elements on 1 page (which has been the downfall of so many others)

  1. var tabs = {
  2. init: function(){
  3. var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
  4. $tab_contents.find('.tab-content:not(:first)').hide();
  5. $tab_nav.find('li:first').addClass('active');
  6. $tab_nav.on('click', 'li a', function(e){
  7. e.preventDefault();
  8. var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
  9. $(parent,$tab_nav).find('li').removeClass('active');
  10. $this.parent().addClass('active');
  11. $contents.find('.tab-content').hide();
  12. $contents.find(activeTab).fadeIn(250);
  13. });
  14. }
  15. };
  16. $(document).ready(tabs.init());
  17.  
  18.  
  19. <section>
  20. <h2>Section Title</h2>
  21. <ul class="tab-nav">
  22. <li><a href="#tab1" title="">Tab 1</a></li>
  23. <li><a href="#tab2" title="">Tab 2</a></li>
  24. </ul>
  25. <div class="tab-contents">
  26. <div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
  27. <div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
  28. </div>
  29. </section>

Report this snippet  

You need to login to post a comment.