Tutorial: Simple jQuery Tabs

When it comes to implementing tabs into your website there is no reason to use a plugin for this. It’s really simple to setup your own! Below is an example of a very basic tab setup using a few lines of Javascript, some CSS and a bit of HTML.

How It Works

These tabs work very simple. We have a ul element which contains the tabs”. We style these out to look like nice tabs. We then have contents” div which has all of our content. In the example above I organized the content into p elements. When a user clicks on a tab in our ul element, we apply an active” class to the clicked tab and show that tabs contents.

Take a closer look at the ul element that houses our tabs. You notice each tab as a unique attribute (data-content-id). This is a custom data attribute I assigned to the elements. This allows us to quick know which content goes to which tab. So in our Javascript we just look for the (data-content-id) on the tab the user clicked. This quickly links us to the appropriate p element.

Line by line

The HTML is pretty simple. Notice that I apply the active” tab to the tab I want to show by default. I then apply a style="display:block" to its corresponding content p element.

<ul class="tabs">
<li class="active" data-content-id="team">Team</li>
<li data-content-id="about">About</li>
<li data-content-id="contact">Contact</li>
</ul>
<div class="content">
<p id="team" style="display:block">
Team
</p>
<p id="about">
About
</p>
<p id="contact">
Contact
</p>
</div>

The CSS straight forward. Take note that we hide all p elements to start with. If we didn’t do this, all tabs would display when we first load the page.

body {
  background-color: #53626E;
  font-family: sans-serif;
}

/* div that holds our contents */
.content {
  background-color: #FFF;
  width: 400px;
  height: 300px;
  margin: 0 auto;
  border-radius: 3px;
}

/* Each <p> with our content... */
.content p {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 30px 25px;
  display: none; // We hide all of them to start...
}

/* Remove default styles... */
.tabs, .tabs li {
  list-style: none;
  margin: 0 0 -3px 0;
  padding: 0;
}

/* Container that holds our tabs */
.tabs {
  background-color: #53626E;
  width: 400px;
  height: auto;
  margin: 50px auto 0px auto;
}

/* All unactive tabs */
.tabs li {
  width: auto;
  display: inline-block;
  padding: 10px 25px 10px 25px;
  color: #BBB;
  cursor: pointer;
}

/* Our Active Tab */
.tabs li.active {
  background-color: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #333;
}

Here is where the magic happens, in these few lines. Which someone clicks out tab we first hide all p elements. Why do we do this? This resets all content elements. If we didn’t do this, the previous tab would still be visible. With all tabs hidden we then find the tab the user clicked on and display its contents.

We do this same exact method for the actual tab element the user clicked on. We remove the active class from all of them, so the previous clicked on isn’t active. Then apply the active class to the newly clicked tab.

$('.tabs li').click(function(){
  
  // Hide all content p elements
  $('.content p').hide();
  
  // Show the corresponding P element for the clicked tab
  $('#' + $(this).attr('data-content-id')).show();
  
  // Remove the active class from all tabs
  $('.tabs li').removeClass('active');
  
  // Apply the active class to the clicked tab (this)
  $(this).addClass('active');
  
});

There you have it! Some really simple tabs that you can use just about anywhere. Use the email form below to subscribe for more content like this! ;)