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

view plainprint?

1. <div id="wrap">  
2. <div class="tabbed">  
3.  <ul class="tabs">  
4.   <li><a id="1" href="#">My Mail</a></li>  
5.   <li><a id="2" href="#">RSS</a></li>  
6.   <li><a id="3" href="#">PHP Courses</a></li>  
7.   <li><a id="4" href="#">jQuery for All</a></li>  
8.  </ul>  
9.  <div id="1" class="content">  
10.  <center><h3>Tab1</h3></center>  
11.   <p>Sed ut perspiciatis...</p>  
12.    
13.  </div>  
14.  <div id="2" class="content">  
15.  <center><h3>Tab2</h3></center>  
16.   <p>eum iure reprehenderit, qui ...</p>  
17.  </div>  
18.  <div id="3" class="content">  
19.  <center><h3>Tab3</h3></center>  
20.   <p> iusto odio dignissimos...</p>  
21.  </div>  
22.  <div id="4" class="content">  
23.  <center><h3>Tab4</h3></center>  
24.   <p>voluptatem sequi...</p>  
25.  </div>  
26. </div>  
27. </div>  

<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

view plainprint?

1. #wrap {  
2. width: 400px;  
3. font-size: 12px;  
4. margin: 20px auto;  
5. border:1px solid #494e52;  
6. background-color:#636d76;  
7. padding:8px;  
8. }  

#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

view plainprint?

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

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

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

CSS

view plainprint?

1. .tabbed {  
2. width: 400px;  
3. background: #39414A repeat-x bottom;  
4. }  
5.   
6. .tabbed .tabs li {  
7. list-style: none;  
8. float: left;  
9. }  
10.   
11. .tabbed .tabs li a {  
12. display: block;  
13. width: 99.25px;  
14. padding: 5px 0;  
15. font-weight: bold;  
16. text-align: center;  
17. text-decoration: none;  
18. color: #fff;  
19. background: #181C21 repeat-x bottom;  
20. border-left: 1px solid #fff;  
21. border-bottom: 1px solid #fff;  
22. }  
23.   
24. .tabbed .tabs li:first-child a {  
25. border-left: none;  
26. }  
27.   
28. .tabbed .tabs li a:hover {  
29. color: #B4CBD9;  
30. }  
31.   
32. .tabbed .tabs li a:focus {  
33. outline: none;  
34. }  

.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

view plainprint?

1. .content{  
2. display: none;  
3. border:1px solid #fff;  
4. }  
5.   
6. .content p{  
7. padding: 20px 10px 10px 10px;  
8. color:#C0D0C0;margin: 1em 0;  
9. }  

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

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

jQuery:

view plainprint?

1. $(document).ready(function() {  
2.   
3. $("#wrap").corner("round 10px");  
4.   
5. $(".tabs li a").click(function(event) {  
6.  $(".tabbed .content").css("display", "none");  
7.  $(".tabbed .tabs li a").removeClass("active");  
8.  $(this).addClass("active");  
9.  $(".tabbed .content[@id="+$(this).attr("id")+"]").fadeIn("def");  
10. });  
11.   
12. $(".tabs li a[@id=1]").click();  
13.   
14. });  

$(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:

view plainprint?

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

<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:

view plainprint?

1. .tabbed .tabs li a.active {  
2. background: #fff;  
3. color: #B4CBD9;  
4. }  

.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 ?

---