Custom and simple jQuery tabs, no library needed

Custom and simple jQuery tabs, no library needed. This example is very easy and light to your page. Follow and copy the codes below.

DEMO

• Tab 1
• Tab 2
• Tab 3

 

HTML codes :

<ul class="tab-menu">
  <li id="tab-1">Tab 1</li>
  <li id="tab-2">Tab 2</li>
  <li id="tab-3">Tab 3</li>
</ul>
<div id="tab">
  <div id="tab-1" class="tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Loummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
  </div>
  <div id="tab-2" class="tab">
    <p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <p>Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Loummy text of the printing and typesetting industry.</p>
  </div>
  <div id="tab-3" class="tab">
    <p>Loummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Loummy text of the printing and typesetting industry. Lorem standard dummy text ever since the 1500s</p>
    <p>Loummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  </div>
</div>

JQUERY codes :

jQuery(document).ready(function() {  
	jQuery( '#tab' ).css( 'height', jQuery( '.tab' ).first().css( 'height' ) );  
	jQuery( '.tab' ).not( ':first' ).css( 'visibility', 'hidden' ); 
	jQuery( '.tab-menu li' ).first().addClass( 'active-nav' ); 
	jQuery( '.tab-menu li' ).on( 'click',function( event ) { 
		jQuery( '.tab-menu li' ).removeClass( 'active-nav' );
		var active_id = jQuery( this ).addClass( 'active-nav' ).attr('id'); 
		jQuery( '.tab' ).removeClass( 'active-content' ).css( 'visibility', 'hidden' );	
	 	jQuery( '#tab #'+active_id ).addClass( 'active-content' ).css( 'visibility', 'visible' ); 
		jQuery( '#tab' ).animate({
			 height: jQuery( '#tab #'+active_id ).css( 'height' )
		}, 1000 );
	});	
}); 
jQuery(window).bind( 'load', function() {   
	jQuery( '#tab' ).css( 'height', jQuery( '.tab' ).first().css( 'height' ) );  
}); 

CSS codes :

ul.tab-menu {
	float: left;
	width: 18%;
	padding: 0;
	margin: 0;
}
ul.tab-menu li {
	float: left;
	background: #ddd;
	padding: 5px 0;
	width: 33.3%;
	text-align: center;
	list-style: none;
	cursor: pointer;
}
ul.tab-menu li.active-nav {
	background: #000;
	color:#fff;
}
#tab {
	width: 100%;
	background: #ddd;
	clear: both;
	position: relative;
}
#tab .tab {
	padding: 15px;
	position: absolute;
	background: #ddd;
}