A jQuery Tabbed Box

Posted by jcargoo | Tuesday, February 24, 2009
| 0Delicious Twitter Reddit Digg Loading...


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







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 ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

4 Previous Comments
  1. Tomas Loon | February 24, 2009 at 11:17 AM  

    It is much better to use unique IDs... instead of id, you can use rel for the anchor, in order to get xhtml validated and will work too...

  2. Anonymous | February 24, 2009 at 1:16 PM  

    Yes Tomas Loon you are right but this works fine too.
    Great example.

  3. jcargoo | February 25, 2009 at 1:36 AM  

    using rel for anchor is a nice idea..thanks Tomas Loon.

  4. Amandine | April 16, 2009 at 1:38 AM  

    I will use it for my intranet site :)