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>
Hi there,
I’m having trouble getting this to work with wordpress. Any ideas as to why?
Thanks,
Chris
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!
this is what i’m looking for, but when i right click and open each tab in new tab it only show the tab1.
So thanks you !!!!!!!!!!!!!!!! I was looking to integer this with Concrete5 5.6.3 and was stucked !
Thanks
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!
Awesome! Thanks!
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
Saved me hours of crying in the shower!! haha 🙂 Thank you!!
Thank you for share this example… God bless you JackLok 🙂
Did anyone find a solution to the IE8 issue?
It looks like there is a compatibility problem with Internet Explorer 8. When you click on the tabs it does nothing. Any workaround?
yes it is having problem with IE8. can anyone give the solution hw to fix it.
You can use HTML5 shiv to fix this in IE8: http://en.wikipedia.org/wiki/HTML5_Shiv