Main Tutorials

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 Author

author image
Co-founder of penefit.com.

Comments

Subscribe
Notify of
13 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Chris
10 years ago

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

Adriano
11 years ago

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
6 years ago

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
6 years ago

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

Thanks

novisibles
8 years ago

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
8 years ago

Awesome! Thanks!

Rick
8 years ago

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
9 years ago

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

ataraxio
9 years ago

Thank you for share this example… God bless you JackLok 🙂

DB
10 years ago

Did anyone find a solution to the IE8 issue?

Steve
11 years ago

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

sudh
10 years ago
Reply to  Steve

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

John
9 years ago
Reply to  sudh

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