Advanced Search

Return to Snippet

Revision: 54218
at December 15, 2011 04:13 by digitalclubb
Updated Code 
var tabs = {
	init: function(){
		var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
		$tab_contents.find('.tab-content:not(:first)').hide();
		$tab_nav.find('li:first').addClass('active');
		$tab_nav.on('click', 'li a', function(e){
			e.preventDefault();
			var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
			$(parent,$tab_nav).find('li').removeClass('active');
			$this.parent().addClass('active');
			$contents.find('.tab-content').hide();
			$contents.find(activeTab).fadeIn(250);
		});
	}
};  
$(document).ready(tabs.init());


<section>
	<h2>Section Title</h2>
	<ul class="tab-nav">
		<li><a href="#tab1" title="">Tab 1</a></li>
		<li><a href="#tab2" title="">Tab 2</a></li>
	</ul>
	<div class="tab-contents">
		<div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
		<div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
	</div>
</section>

Revision: 54217
at December 15, 2011 04:11 by digitalclubb
Initial Code 
var tabs = {
	init: function(){
		var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
		$tab_contents.find('.tab-content:not(:first)').hide();
		$tab_nav.find('li:first').addClass('active');
		$tab_nav.on('click', 'li a', function(e){
			e.preventDefault();
			var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
			$(parent,$tab_nav).find('li').removeClass('active');
			$this.parent().addClass('active');
			$contents.find('.tab-content').hide();
			$contents.find(activeTab).fadeIn(250);
		});
	}
};  
$(document).ready(tabs.init());


<section>
	<h2>Section Title</h2>
	<div class="content">
		<ul class="tab-nav">
			<li><a href="#tab1" title="">Tab 1</a></li>
			<li><a href="#tab2" title="">Tab 2</a></li>
		</ul>
		<div class="tab-contents">
			<div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
			<div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
		</div>
	</div>
</section>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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)

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
jQuery Tabbed Element for multiple elements

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
jquery

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
jQuery