Tabbed Area

Why do we have to learn how to code tabbed area while there are so many plugins that able to create a tabbed area instantly? Why do we have to reinvent the wheel?

Because understanding how it works is a good plus for you. If you understand the way it works, you may customize it for your further need. Plus, it’s a damn easy.

So let’s get going

The Markup

Basically, this is the common structure of a tabbed area:

HTML Structure of Tabbed Area

Click picture to enlarge

A wrapper contains a tab navigation which is built on unorder-lists plus a link inside and a tab content which contains several div areas.

Here’s the code:

<h1>Dead Simple <em>Do-It-Yourself</em> Tabbed Area</h1>
<div id="tab-wrap" class="clearfix">

<ul id="tab-nav">
<li><a href="#first-tab">First Tab</a></li>
<li><a href="#second-tab">Second Tab</a></li>
</ul>

<div id="tab-content">
<div class="tab" id="first-tab">
<h2>This is first tab</h2>
<p>This is first tab. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="tab" id="second-tab">
<h2>This is second tab</h2>
<p>This is second tab. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>
</div>

The Logic

Tabbed Area Logic

This is how the tab -commonly- works.

Stylesheet

  1. Style the markup so it looks like a tab
  2. Hide all tabs – using stylesheet

Javascript initialization on page load

  1. Show first tab – using javascript
  2. Give specific class to first link on tab navigation to indicate that it is the active tab nav item – using javascript

When the tab nav item is clicked (Behaviour)

Important: href attribute of the tab-navigation link is pointed to specific tab ID. So when the tab-navigation item is clicked:

  1. Get the value of href attribute of the clicked link
  2. Hide all tab area
  3. Show element with that value (which is an ID of one tab area)
  4. remove all class which indicates active behavior from tab-navigation link
  5. Add class to clicked tab-navigation link
  6. Prevent link from behaving default action which is moving browser page to the assigned ID

That’s the logic.

The codes

The Stylesheet. Pretty self explanatory

/* Basic Styling */
#tab-wrap {display:block; width:300px; background:#efefef; padding:10px; margin-top:40px;}

/* Tab Navigation */
#tab-nav li {float:left;} /* floated. If this area isn't floated, it will be collapsed */
#tab-nav a {float:left; padding:5px 5px 2px; width:140px; background:#efefef;}
#tab-nav a.active{background:#fff;}

/* The Tab */
.tab {background:#fff; padding:10px; float:left; width:280px; display:none;}

The Javascript (using jQuery)

$(document).ready(function() {
$('.tab:first').show();
$('#tab-nav a:first').addClass('active');
$('#tab-nav a').click(function(){
var tabID = $(this).attr('href'); // Get the value of clicked a's href attribute
$('.tab').hide(); // Hide all tab
$(tabID).fadeIn(); // Show aimed tab
$('#tab-nav a').removeClass('active'); // Remove 'active' class from all nav item
$(this).addClass('active'); // Add 'active' class to clicked nav item
return false; // Kill the link, don't do default action which is 'jump' to destined ID
});
});

The Demo

Finally here’s the demo:

Demo of Dead Simple DIY Tabbed Area Using jQuery

View the source code of the demo page for further explanation. Hope this tutorial helps 🙂

5 thoughts on “Dead Simple Do-It-Yourself Tabbed Area Using jQuery

  1. Good tutorial, I hope very useful for my personal project. 🙂

    1. I hope you find it useful 🙂

  2. sangprabo

    Why don’t use jqueryui.com ?

    1. IMO, it’s bloated for something super simple like this tabbed area.

  3. Ini perasaan saya aja atau bagaimana??…

    Saya tidak melihat tag; di demonya ya.

    Apakah itu tidak apa-apa?

Share Your Thought