show hide tab with jquery

read full artcle on http://aslamise.blogspot.com

by Aslamise

HTML

<div>
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab1">tab 1</a>
        </li>
        <li>
            <a href="#tab2">tab 2</a>
        </li>
        <li>
            <a href="#tab3">tab 3</a>
        </li>
    </ul>
</div>


<section id='tab1' class="tab-content active">
        Contents in tab 1 section
</section>
<section id='tab2' class="tab-content hide">
        Contents in tab 2 section
</section>
<section id='tab3' class="tab-content hide">
        Contents in tab 3 section
</section>

<div style='margin-top:30px;'>read full artcle on <a href='http://aslamise.blogspot.com' target='_blank'>http://aslamise.blogspot.com</a></div>

CSS

.nav {
			  margin-bottom: 18px;
			  margin-left: 0;
			  list-style: none;
			}
 
			.nav > li > a {
			  display: block;
			}
 
			.nav-tabs{
			  *zoom: 1;
			}
 
			.nav-tabs:before,
			.nav-tabs:after {
			  display: table;
			  content: "";
			}
 
			.nav-tabs:after {
			  clear: both;
			}
 
			.nav-tabs > li {
			  float: left;
			}
 
			.nav-tabs > li > a {
			  padding-right: 12px;
			  padding-left: 12px;
			  margin-right: 2px;
			  line-height: 14px;
			}
 
			.nav-tabs {
			  border-bottom: 1px solid #ddd;
			}
 
			.nav-tabs > li {
			  margin-bottom: -1px;
			}
 
			.nav-tabs > li > a {
			  padding-top: 8px;
			  padding-bottom: 8px;
			  line-height: 18px;
			  border: 1px solid transparent;
			  -webkit-border-radius: 4px 4px 0 0;
				 -moz-border-radius: 4px 4px 0 0;
					  border-radius: 4px 4px 0 0;
			}
 
			.nav-tabs > li > a:hover {
			  border-color: #eeeeee #eeeeee #dddddd;
			}
 
			.nav-tabs > .active > a,
			.nav-tabs > .active > a:hover {
			  color: #555555;
			  cursor: default;
			  background-color: #ffffff;
			  border: 1px solid #ddd;
			  border-bottom-color: transparent;
			}
 
			li {
			  line-height: 18px;
			}
 
			.tab-content.active{
				display: block;
			}
 
			.tab-content.hide{
				display: none;
			}

JavaScript

$(document).ready(function() {
		$('.nav-tabs > li > a').click(function(event){
		event.preventDefault();//stop browser to take action for clicked anchor
 
		//get displaying tab content jQuery selector
		var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');					
 
		//find actived navigation and remove 'active' css
		var actived_nav = $('.nav-tabs > li.active');
		actived_nav.removeClass('active');
 
		//add 'active' css into clicked navigation
		$(this).parents('li').addClass('active');
 
		//hide displaying tab content
		$(active_tab_selector).removeClass('active');
		$(active_tab_selector).addClass('hide');
 
		//show target tab content
		var target_tab_selector = $(this).attr('href');
		$(target_tab_selector).removeClass('hide');
		$(target_tab_selector).addClass('active');
	     });
	  });