How to use CSS and jQuery to hide and show tab content

Demo : Try clicks on the tab

When I developing my foodshaker.com. There is requirement for me to create a multi tab navigation to hide and show tab content. In order to develop a lightweight multitab, I decided to use jQuery and CSS to facilitate it.

1. Explanation

Below is an example of navigation:


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

It is required to indicate which navigation is shown, thus I use ‘active’ CSS classname to represent it. “nav nav-tabs” is used to style the look and feel of navigation. Each navigation link <a> is having target of tab content jQuery selector.

E.g. href="#tab1", the value of href attribute will be used to create jQuery object and display the content.

Below is an example of tab content:


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

The CSS classname ‘hide’ is used to style the display to be none, where:


.tab-content.hide{
    display: none;
}

The CSS classname ‘active’ is used to style the display to be shown, where:


.tab-content.active{
    display: block;
}

To facilitate click event of navigation, we need “click” event like in below:


$('.nav-tabs > li > a').click(function(event){
   //...... logic to hide and show tab content
}

First, we need to find up the shown navigation and displaying tab content. Thus:


//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');

Then, we find the activated navigation and changed it to not active:


//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');

Besides, we need to change the clicked navigation to be active:


//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');

Show target tab content:


var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');

2. Full Example

Complete HTML source code to use CSS and jQuery to hide and show tab content.


<html>
  <head>
	<title>How to use CSS and jQuery to hide and show tab content</title>
		
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script>
	$(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');
	     });
	  });
	</script>
		<style>
			/** Start: to style navigation tab **/
			.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;
			}
			
			
			/** End: to style navigation tab **/
		</style>
	</head>
	<body>
		<div>
			<ul class="nav nav-tabs">
				<li class="active">
					<a href="#tab1">Show Tab 1</a>
				</li>
				<li>
					<a href="#tab2">Show Tab 2</a>
				</li>
				<li>
					<a href="#tab3">Show Tab 3</a>
				</li>
			</ul>	
		</div>
		<section id="tab1" class="tab-content active">
			<div>
				Content in tab 1
			</div>
		</section>
		<section id="tab2" class="tab-content hide">
			<div>
				Content in tab 2
			</div>
		</section>
		<section id="tab3" class="tab-content hide">
			<div>
				Content in tab 3
			</div>
		</section>
	</body>
</html>

Download Source Code

About the Author

author image
JackLok
Co-founder of penefit.com.

Comments

Leave a Reply

avatar
newest oldest most voted
Adriano
Guest
Adriano

Nice article! Thanks for sharing.

It was even better if it was possible to directly link to the tabs…
Ex : http:// … jQuery-show-and-hide-tab-content.html#tab2 should open tab2.

Any ideas on how to modify the above code to acomplish that ?

Regards!

Paul
Guest
Paul

this is what i’m looking for, but when i right click and open each tab in new tab it only show the tab1.

mormugao
Guest
mormugao

So thanks you !!!!!!!!!!!!!!!! I was looking to integer this with Concrete5 5.6.3 and was stucked !

Thanks

novisibles
Guest
novisibles

Dear Jacklok,
I can-t seem to include the jquery script to be used in a wordpress page.
I tried enqueing it, i googled for different solutions.. so far nothing works!! :(
can you halo me out please!

Juan Pablo
Guest
Juan Pablo

Awesome! Thanks!

Rick
Guest
Rick

Old thread, hope someone answers. Works good for me. I am just OK with CSS, How do I get the links to NOT be the default browser blue. Seems standard fon-colr css code isn’t working. Thanks

Gary
Guest
Gary

Saved me hours of crying in the shower!! haha :) Thank you!!

ataraxio
Guest
ataraxio

Thank you for share this example… God bless you JackLok :)

DB
Guest
DB

Did anyone find a solution to the IE8 issue?

Steve
Guest
Steve

It looks like there is a compatibility problem with Internet Explorer 8. When you click on the tabs it does nothing. Any workaround?

sudh
Guest
sudh

yes it is having problem with IE8. can anyone give the solution hw to fix it.

John
Guest
John

You can use HTML5 shiv to fix this in IE8: http://en.wikipedia.org/wiki/HTML5_Shiv

Chris
Guest
Chris

Hi there,
I’m having trouble getting this to work with wordpress. Any ideas as to why?
Thanks,
Chris