jQuery & CSS | How to create simple tabs using jQuery and CSS

In this tutorial we will show you how to create simple tabs using jQuery and CSS. The last output of our tutorial will be like below.

[wp-js-fiddle url=”http://jsfiddle.net/moinsam/engzR/” style=”width:100%;height:400px;border:solid #4173A0 1px;”]

Step: 1

Our first step is to add the jQuery Script file to our HTML page. For that we add the following line in our HTML page.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    
    </body>
</html>

In line-5 we add the latest jQuery library file provided by jQuery. We have no need to think about the version number, when a new version released we have access that version.

Step: 2

Our second step is to add the following html code inside the body tag of our html page.

<h1>Simple Tabs</h1>
<ul>
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>

<div id="java">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

Here we put a list of anchor links to different areas of the page at the top and after that wrap the content sections in a div with an id. If we load the html page in browser then we see that the list of links at the top of the page work like a table of content of this page. when we click any link it jump down to the very section.

Step: 3

Now we will prepare our code to turn the table of contents into tabs. At first we add an id to the ul that contains our table of contents and then add a class to each of the div that contain our sections of content. Our edited code is like below, we have highlight the line that has been changed.

<h1>Simple Tabs</h1>
<ul id="tabs">
    <li><a href="#java">Java</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#python">Python</a></li>
    <li><a href="#ruby">Ruby</a></li>
    <li><a href="#perl">Perl</a></li>
</ul>

<div id="java" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="php" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="python" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="ruby" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>
<div id="perl" class="tab-section">
    <h2>Here we place title</h2>
    <p>Here we place details </p>
</div>

Step: 4

Now we add some CSS so that our table of contents become like tabs and each section of the associated links is looks like tab section. Lets create a css file e.g., style.css and put these following code in it.

#tabs {
	margin: 0;
	overflow: hidden;
	padding: 0;
	zoom: 1;
	position:relative;
	top:2px;
	z-index: 1;
}

#tabs li {
	display: block;
	list-style: none;
	margin: 0;
	margin-right: 1px;
	padding: 0;
	float: left;
}

#tabs li a {
	display: block;
	padding: 2px 10px;
	border: 2px solid #817bfc;
	border-bottom: 0 none;
	text-align: center;
	text-decoration: none;
}

.tab-section {
	background:#d4efff;
	padding: 10px;
	border: 2px solid #817bfc;
}

#tabs li a.current {
	background: #d4efff;
	color: #000;
	border-bottom: 2px solid #d4efff;
}

It is a basic css code. You can add more style to make you tabs more beautiful. Remember that we need to add the css file using a link tag inside the head tag like

<link rel="stylesheet" href="styles.css"/>

If you out the css file in the same folder of your html page then just the file name is enough for href but if you put it in some other place then you should mention the file path in href.

Step: 5

Now create a javascript file e.g., scripts.js and put the following jQuery code in it

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		$('#tabs a.current').removeClass('current');
		$('.tab-section:visible').hide();
		$(this.hash).show();
		$(this).addClass('current');
		e.preventDefault();
	}).filter(':first').click();
});

Then add the file in the html page using script tag like

<script src="scripts.js"></script>

We will explain the above code step by step. First, we need to hide all the sections. So initial stage of our code is like bellow.

$(function(){
	$('.tab-section').hide();	
});

Next, we need to show the appropriate section when one of our tabs is clicked. So we add the highlighted line.

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		e.preventDefault();
	});
});

Here we have selected all the links inside the ul with the id of #tabs and bound a function to the links on click.
So now when we click on one of the table of contents links we will see the associated section and before that hide the previous visible section. The following highlighted line of code do this job.

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		$('.tab-section:visible').hide();
		$(this.hash).show();
		e.preventDefault();
	});
});

In the first highlighted line we use :visible pseudoclass to select the .tab-section that is currently visible and then hide this section. The next line show the selected section.
Here we use the hash or the part of the href attribute that includes the # symbol. Here this means the link that was just clicked and this.hash is the value of the href attribute starting with the # symbol.
Now if you load the page in browser you will see that it is not possible to identify which tab is selected, but we need to identify which tab is selected and for that we add the following highlighted code.

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		$('#tabs a.current').removeClass('current');
		$('.tab-section:visible').hide();
		$(this.hash).show();
		$(this).addClass('current');
		e.preventDefault();
	});
});

Here we find out the tab that has the class current and then remove that class. Next we get the tab that was just clicked and add the current class to it.
Now the only thing left to do is to make the first tab active and show the first content section when the page is first loaded instead of leaving them all hidden. We have already written the function for this, so now all we have to do is call it for our first tab. The highlighted line of the code below to this job.

$(function(){
	$('.tab-section').hide();
	$('#tabs a').bind('click', function(e){
		$('#tabs a.current').removeClass('current');
		$('.tab-section:visible').hide();
		$(this.hash).show();
		$(this).addClass('current');
		e.preventDefault();
	}).filter(':first').click();
});

Here we tell jQuery to click the first tab for us, as a result it run our function, add the current class to the first link, and show the first .tab-section.

Code Download:

You can download the code from this link Download From Github

Post Tagged with , ,

25 Responses so far.

  1. Darla says:

    Please show me how to put the jquery in a javasscript please

    • Md. Moin Uddin says:

      Please create a javascript file (e.g., scripts.js) and put the jQuery code on that file. And then add that javascript file using script tag inside the head tag of you html page like below

      <script src="scripts.js"></script>
      

      You can also write you javascript code in a html page using script tag like below

      <script>
      $(function(){
          $('.tab-section').hide();
          $('#tabs a').bind('click', function(e){
              $('#tabs a.current').removeClass('current');
              $('.tab-section:visible').hide();
              $(this.hash).show();
              $(this).addClass('current');
              e.preventDefault();
          }).filter(':first').click();
      });
      </script>
      

      But it is good practice to put all script code in a separate file. Thank you for you comment.

  2. Md. Moin Uddin says:

    This is the latest CDN version – 1.9.1
    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    You get this near the footer of http://jquery.com

  3. mohammed says:

    where to add css code

  4. Salazar says:

    HI MD UDDIN I have a problem I´d like to know if you could tell me How to change horizontal tabs to vertical tabs I hope you can help me with this problem

  5. Anonymous says:

    Hi, how can I have multiple tabs active on the same page?

  6. Kiran says:

    Hello Md. Moin Uddin,
    I got your logic very simple. But i’m not getting the same on my side. I copied your code completely.But it seems like something wrong or missing by my side. Only names and title are displaying instead of tabs.
    Please suggest me something.I am new to jQUERY.
    Thanks..

  7. Karambir says:

    Amazing and simple. I was feeling like in wrong place with jquery, but this code made me right,,……
    Pleasure thanking you..

  8. mukesh says:

    thank u its working fine, its save my time,, very very thanks..

  9. bheeesham says:

    how can we move into next tab using keyboard TabKey

  10. sai says:

    It works, thanks

  11. supriya says:

    great…it’s easy..thanku

  12. Sri says:

    Hi,
    Can u please help me implement nested tabs using the above code structure ? Thank u in advance.

  13. Ron says:

    Thanks for this clear explanation. But I am struggling with the following:

    I have various form fields in different tabs. When switching to another tab, I want to reset all form fields in the tabs which are closed. I know how to do this by targeting the individual field-id’s with a seperate onclick event. But would it be possible to integrate a generic ‘reset all formfield in closed tabs’ function into your script?

  14. Hemant says:

    Thank you,its very easy to use.

  15. nadia says:

    thanks.. it works!

  16. lucia says:

    hope to see more of your helpful post.really helped me .

Leave a Reply

Your email address will not be published. Required fields are marked *

19 + 9 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.