A jQuery Tabbed Box

This article will show you how to create a tabbed box and how jQuery can be useful to let you play with the tabs.

View Demo

Let’s show first the high-level structure:
HTML

<div id="wrap">
<div class="tabbed">
 <ul class="tabs">
  <li><a id="1" href="#">My Mail</a></li>
  <li><a id="2" href="#">RSS</a></li>
  <li><a id="3" href="#">PHP Courses</a></li>
  <li><a id="4" href="#">jQuery for All</a></li>
 </ul>
 <div id="1" class="content">
 <center><h3>Tab1</h3></center>
  <p>Sed ut perspiciatis...</p>
 
 </div>
 <div id="2" class="content">
 <center><h3>Tab2</h3></center>
  <p>eum iure reprehenderit, qui ...</p>
 </div>
 <div id="3" class="content">
 <center><h3>Tab3</h3></center>
  <p> iusto odio dignissimos...</p>
 </div>
 <div id="4" class="content">
 <center><h3>Tab4</h3></center>
  <p>voluptatem sequi...</p>
 </div>
</div>
</div>

The code above is made up of:

+ Principal wrapper (wrap class);

CSS

#wrap {
width: 400px;
font-size: 12px;
margin: 20px auto;
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

+ Another wrapper (tabbed class) that holds the whole tabbed box;

CSS

.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

+ A list (tabs class) which contains all the 4 tabs;

CSS

.tabbed {
width: 400px;
background: #39414A repeat-x bottom;
}

.tabbed .tabs li {
list-style: none;
float: left;
}

.tabbed .tabs li a {
display: block;
width: 99.25px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
background: #181C21 repeat-x bottom;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.tabbed .tabs li:first-child a {
border-left: none;
}

.tabbed .tabs li a:hover {
color: #B4CBD9;
}

.tabbed .tabs li a:focus {
outline: none;
}

The width of “tabbed .tabs li a” was calculated as follows:
- We have “.tabbed .tabs li:first-child a” has no left border;
- Then we have only 3 border-left of 1 px;
- The full width is 400px.

So: (400px – 3 * 1px)/4 = 99.25px

+ 4 Divs (content class) considered as containers of all tabs.

CSS

.content{
display: none;
border:1px solid #fff;
}

.content p{
padding: 20px 10px 10px 10px;
color:#C0D0C0;margin: 1em 0;
}

jQuery:

$(document).ready(function() {

$("#wrap").corner("round 10px");

$(".tabs li a").click(function(event) {
 $(".tabbed .content").css("display", "none");
 $(".tabbed .tabs li a").removeClass("active");
 $(this).addClass("active");
 $(".tabbed .content[@id="+$(this).attr("id")+"]").fadeIn("def");
});

$(".tabs li a[@id=1]").click();

});

In order to have a round corner for wrap class, I have chosen to use the Corner jQuery plugin.

Our code is very simple to understand. We first choose to display only the tab content that we prefer thanks to: $(".tabs li a[@id=1]")
Now you may know why we have an id for every anchor that matches the same id defined in the content class for div element.

Example:

<li><a id="X" href="#">HHHHH</a></li>
...
<div id="X" class="content">
...

The active class applied when the click event is triggered for each matched element is:

.tabbed .tabs li a.active {
background: #fff;
color: #B4CBD9;
}

Finally, the fadeIn effect was used to show the content of every tab.
That’s all.

How to encourage this blog if you like it:

• Promote our sponsors;
• Add any kind of comment or critic;
• Ask me directly by email if you prefer.

Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

---