CSS3 & jQuery folder tabs

January 31, 2012 by Catalin Rosu - 76 comments

Ever since I started working for one of my CSS3 breadcrumbs example, I thought about writing this tutorial. In this article, I will use a similar technique in order to create some good looking CSS3 tabs.

While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3.

View demo

The HTML

The markup is self explanatory. ~~While the title attributes might seem to be extra, in this case they are needed for the jQuery stuff.~~ After reading your comments, I decided to update the title attribute with name. This way, you will avoid seeing unnecessary tooltip when hovering on the tabs.

<ul id="tabs">
    <li><a href="#" name="tab1">One</a></li>
    <li><a href="#" name="tab2">Two</a></li>
    <li><a href="#" name="tab3">Three</a></li>
    <li><a href="#" name="tab4">Four</a></li>    
</ul>

<div id="content"> 
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
    <div id="tab4">...</div>
</div>

So, here are the ingredients:

#tabs – an unordered list that holds the tab navigation items.
#content – a wrapper for each tab content.

The CSS

Below you’ll find the CSS lines necessary for creating these tabs. Also, the demo source contains all the prefixed CSS3 properties.

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}

#tabs a:focus{
  outline: 0;
}

#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;	
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

The jQuery

There is nothing to add here, it’s similar to my previous tabs article.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
    
    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
});
</script>

Again, I updated a bit the above code to add detection when clicking on the current tab. Now, everything should be just fine. Thanks for your suggestions!

View demo

The end (of this tutorial)

This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.

So, having said that, I hope you liked this article and thanks for reading it!

If you enjoyed this article, get updates via RSS or email (it's free).

76 thoughts on “CSS3 & jQuery folder tabs”

wendell on January 31, 2012 at 15:07 said:

awesome.. exactly what i need, thanks red
Reply ↓
Nino Blasco on January 31, 2012 at 16:07 said:

Very nice tutorial!
Thanks for sharing.
Reply ↓
WebD on January 31, 2012 at 16:09 said:

Doesn’t display properly in IE :( I think you should mention it so people don’t try it for nothing. Thanks
Reply ↓
- Red on January 31, 2012 at 16:23 said:
  
  Hi, first of all, when you hear CSS3, you should know that its features are not available for older browsers.
  Also, it works perfectly on IE9 and IE10 preview. I think I specified that “the tabs degrade nice” on older browsers.
  Reply ↓
Denis on January 31, 2012 at 16:39 said:

Nice tabs, clean and simple.
You should add some detection for not fading again the same tab content if you are already on it.
bye
Reply ↓
- Red on January 31, 2012 at 17:16 said:
  
  Good point, I’ll update the article soon. Thanks for your suggestion!
  Reply ↓
- Ashish on January 31, 2012 at 20:09 said:
  
  just need to add:
  if($(this).parent().attr(“id”)==”current”){
  return false
  }
  else
  {
  //put the coming all stuff
  }
  And I think, this will be done!!
  Reply ↓
Ashish on January 31, 2012 at 20:04 said:

Really great tabs tutorial. Will publish this soon on my blog too….
just tell me one thing, what is the difference between
a::after and a:after???
Reply ↓
- Red on January 31, 2012 at 20:20 said:
  
  Thanks, glad you like it.
  Check this article about CSS pseudo-elements single/double colon syntax.
  Reply ↓
  - Ashish on January 31, 2012 at 20:28 said:
    
    humm, you are right. I asked the same question there too(It was first comment of mine there LOLz). I am really missing the fun….!!
    Reply ↓
Cihad on January 31, 2012 at 20:38 said:

this is awesome red!
Reply ↓
- Red on February 1, 2012 at 16:45 said:
  
  Nice to hear you like it, thanks!
  Reply ↓
Ana on February 1, 2012 at 02:40 said:

Why not include the latest jQuery version?
Reply ↓
- Red on February 1, 2012 at 16:47 said:
  
  You can always use: http://code.jquery.com/jquery-latest.min.js
  For this demo, the jQuery version number is not relevant though. I’ve probably forgot to update the version in that URL. :)
  Reply ↓
Chris Mitchell on February 3, 2012 at 19:50 said:

Can you provide some insight on making this flipped so the tabs are at the bottom but still preform the same? Thanks and excellent post.
Reply ↓
- Red on February 4, 2012 at 17:28 said:
  
  Chris, if you want to do that, you need to move the ul id="tabs" underneath the div id="content" wrapper.
  Then, technically you need to adjust the styles to match the new design.
  Reply ↓
  - Chris Mitchell on February 6, 2012 at 16:57 said:
    
    Thanks again Red!.
    Reply ↓
samedus on February 16, 2012 at 01:07 said:

Thanks for information friend.
Reply ↓
Neal on February 17, 2012 at 08:41 said:

Excellent! I love this!
Thanks for sharing.
Reply ↓
Red on February 17, 2012 at 09:37 said:

@samedus & @nealHey, I’m glad you like it. Thank you for your comments!
Reply ↓
lerion on February 28, 2012 at 13:03 said:

In IE8 the selected tab is not highlighting. In IE7 it works.
Anyway. Awesome work!
Reply ↓
- Red on March 29, 2012 at 22:43 said:
  
  Fixed, thanks for letting me know! ;)
  Reply ↓
- Chris on December 6, 2012 at 11:37 said:
  
  Hi Red. Fantastic script. Thanx a lot. To solve the IE8 problem of highlightning you can just single the double pseudos (Ex.: #tabs a::after –>>#tabs a:after… and so on) That is not the fine art of CSS3, but it helps ;-)
  Reply ↓
TOM on March 3, 2012 at 04:55 said:

How to make unlimited sub menu for this tabs??? help me please…
Reply ↓
- Red on March 29, 2012 at 22:44 said:
  
  Sorry, I don’t really understand what do you need.
  Reply ↓
dbguy on March 13, 2012 at 02:09 said:

I implemented this on my own project… it looks good except it seems like it won’t display divs nested within the “tab*” divs…
Is this an expected issue or am I missing something? Please help…
Reply ↓
- lnin on March 28, 2012 at 21:38 said:
  
  Change this line
  $(“#content div”).hide(); // Initially hide all content
  to
  $(“#content”).children(“div”).hide(); // Initially hide all content
  and
  $(“#content div”).hide(); //Hide all content
  to
  $(“#content div”).children(“div”).hide(); //Hide all content
  ========================================================
  Anyone have this problem if tabs are somewhere below clicking it causes the page to jump to the top of the page. With other code return false; does the trick but apparently e.parentDefault() is the right way to do it. Solutions please.
  Reply ↓
alexander on April 2, 2012 at 13:28 said:

Sorry, I meant not the titles per se but rather the title-attribute so that on mouse-hover the tooltips don’t say “tab1″, “tab2″, etc. Thx.
Reply ↓
- Red on April 2, 2012 at 13:40 said:
  
  Alexander, here’s a quick workaround for you: replace the “title” in your HTML&jQuery code with the “name” attribute.
  This should work!
  Reply ↓
  - alexander on April 2, 2012 at 14:26 said:
    
    That’s even better for my purposes. Thanks a lot.
    Reply ↓
Joakim on April 12, 2012 at 09:21 said:

Hello Red, Awesome stuff!
I’m pretty new to this an have a question. How do you change the attributes matching the 2nd style. ( Not shuffle the pages but make them fade in and out?)
Thanks a bunch!
Reply ↓
Nikon on April 17, 2012 at 12:12 said:

Very clean and goot tut, i’ve implement that thing and it works very well in diffrent browsers, but it dosent work in safari on mac. Content tab divs not hiding … Any ideas?
Reply ↓
Riaz on April 18, 2012 at 12:23 said:

It is a nice tuts Red. Implemented in my project but when I have the content with 2 tables of 5 rows in, the bottom table rows goes below the tab content. Is there way to have unlimited content space or maybe a scroll bar implementation? Any suggestion?
Reply ↓
- Red on April 18, 2012 at 13:31 said:
  
  You need to adjust/remove the 220pxheight for #content. Hope that helps!
  Reply ↓
  - Riaz on April 18, 2012 at 13:38 said:
    
    Great.. That helps. Thanks man. (: Is there any model dialog box with Forms in your tutorial?
    Reply ↓
tentoes on April 25, 2012 at 12:29 said:

Hi Red,
those are really nice tabs. I have a slightly off-topic question. Say I wanted to use your tabbed menu on a horizontal scrolling site. I applied position: fixed; on #tabs, but actally I only want the tabs to be fixed horizontally not vertically. How would I do that?
Cheers.
Reply ↓
- Red on April 26, 2012 at 11:34 said:
  
  tentoes, send me a link using the contact form and I’ll take a look. Cheers!
  Reply ↓
Friederike on April 26, 2012 at 11:14 said:

Hi Red,
thanks for this awesome tutorial. Works a charm. I’d like to run another script in one of those tabs (I want to embed a commenting function), but it won’t show up. If I place the embedded script elsewhere (outside the tabbed menu) it works. Any ideas?
Thanks in advance.
Reply ↓
- Red on April 26, 2012 at 11:22 said:
  
  Hi Friederike, I’m not sure what your problem is exactly.
  Maybe you can contact me using the contract page form and try sending me a link or something and I’ll get back to you.
  Reply ↓
Sergey on April 27, 2012 at 18:54 said:

Hello Red,
Tank you for your script. I have one little problem, I am surprised, that nobody mentioned this.
In your code you have fixed height for #content -220px. When you remove it or put 100%, then when you click through the tabs – page jumps. Is there a way to fix it? My content for tabs has different height, so I can not have the same height. If I specify height for #tab1 and #tab2, it does not do the trick.
By the way, you have () at the end of java script code. This cause an error in ie8.
Reply ↓
- Red on April 28, 2012 at 12:54 said:
  
  Sergey, that’s exactly the reason why I added a fixed height for the content: to prevent page “jump”. I think there’s no magic solution here, either you keep using a fixed height for all your contents, either you remove the height and you’ll have an auto height.
  Also, thanks for the heads up regarding the closing brackets. The thing is that initially I wanted to use a self invoking anonymous function. I guess that’s why I forgot to remove them when I edited the code.
  Reply ↓
Stephen on May 13, 2012 at 00:15 said:

Hey Red, great tabs and tutorials… I love them all!
I was wondering if their is a way either in jQuery or JavaScript (or even in simple HTML) to have the tabs made current by either an ID or name from the URL. Like this: page.html#tab3 and tab three will be selected and opened.
Thanks!
Reply ↓
Nestorious on May 17, 2012 at 20:14 said:

This is a great solution! I am using a modified version of Share Point and there no “tab templates”, so inserting the HTML into an iFrame works perfect…well, that is in all browers except IE8…only if rounded corners were recognized..Great work Red…I am becoming a huge fan of yours.
Reply ↓
Christian on May 31, 2012 at 11:51 said:

Good tutorial, and explains very well.
Reply ↓
Enes Taha SELEK on June 20, 2012 at 13:05 said:

xx
xx
In this situation, i think code has some problem,
Other Divs do not appear.
my solution is like that
$(document).ready(function () {
$(“#content #tab1″).hide(); // Initially hide all content
$(“#content #tab2″).hide(); // Initially hide all content
$(“#tabs li:first”).attr(“id”, “current”); // Activate first tab
$(“#content #tab1:first”).fadeIn(); // Show first tab content
$(‘#tabs a’).click(function (e) {
e.preventDefault();
if ($(this).closest(“li”).attr(“id”) == “current”) { //detection for current tab
return
}
else {
$(“#content #tab1″).hide(); // Initially hide all content
$(“#content #tab2″).hide(); // Initially hide all content
$(“#tabs li”).attr(“id”, “”); //Reset id’s
$(this).parent().attr(“id”, “current”); // Activate this
$(‘#’ + $(this).attr(‘name’)).fadeIn(); // Show content for current tab
}
});
});
Reply ↓
david on November 3, 2012 at 01:50 said:

i want to use these on a white background. how do i add a border so that the tabs do not fade into the background?
Reply ↓
Vicky on November 3, 2012 at 20:37 said:

Hi. I tried your code but everytime when I change the colors of the tab, they work properly in all browsers except for IE9. Could you help me?
Reply ↓
Andrew on November 11, 2012 at 05:30 said:

Wow! The tab menu looks great on my website–except that I don’t have a clue how to go about connecting the menu’s plumbing with my website’s plumbing.
In other words, what do I do with the 2nd part of the html:
…
…
…
…
For example, do I add etc. to the top & to the bottom of each specified page’s body html?
Reply ↓
Tarak on November 15, 2012 at 07:28 said:

Hi Red,
Thanks for this awesome tutorial. Works a charm.
Reply ↓
shareena on November 25, 2012 at 11:49 said:

I hope you can modify a default tab when the web page reloads.. Thanks!
Reply ↓
weezer50 on November 28, 2012 at 22:43 said:

This is a great tutorial and the tabs look great in Mozilla Firefox. However, I lose all the formatting and rounded corners in IE9. I have went over and over the tutorial today and cannot seem to find where I am stuck. Any help would be appreciated!!
Reply ↓
mina on December 18, 2012 at 23:51 said:

hi
I implemented this on my own project… it looks good except it seems like it won’t display gridview within the “tab*” divs…
can any body help me?
tnx
Reply ↓
Ahmed on January 5, 2013 at 04:25 said:

Love it :)
Reply ↓
Arthur on January 28, 2013 at 09:03 said:

It’s very usefull lesson for me. Thank you!
Reply ↓
Chris on January 30, 2013 at 16:52 said:

Thanks for this awesome tut, Red. Works very well, could make it ready for any browser with some optional css stuff.
But my question is almost the same as Stephen on May 13, 2012 at 00:15:
How can I hash the URL like: meinweb.com/index.html#page3?
Reply ↓
- Catalin Rosu on January 30, 2013 at 21:17 said:
  
  Chris,
  You may want to check one of my latest articles on CSS3 & jQuery tabs.
  It contains everything you need for being able to access a tab like in your above example.
  Reply ↓
shahriar on February 4, 2013 at 00:13 said:

Hi freinds! plz help me to solve my problem.i added this j query Tap too my asp.net web site .but when i put a datagrid view in this tap,and run the project,I cannot see the datagrid view.it seems that, the Tab disaapear my data grid view.Why?who can help me?
Reply ↓
cn arabia on February 16, 2013 at 03:29 said:

Verry nice tutorial thank you . Bit if it was with a next and prev button it will be good .
Reply ↓
Bhushan on February 21, 2013 at 07:21 said:

Nice….This is a great tutorial.
Reply ↓
Nick on February 23, 2013 at 15:44 said:

Hi guys i’m experiencing some problems with this widget. This does not work propperly when you have many divs nested inside your #tab id. It boils down to the fact that all the divs are being hidden under the tab div and only the first div is being displayed.
How would I fix this?
Reply ↓
- Catalin Rosu on February 23, 2013 at 19:29 said:
  
  Nick,
  you may want to change $("#content div").hide(); with $("#content > div").hide();.
  That should do it!
  Reply ↓
  - Peter on May 21, 2013 at 20:58 said:
    
    this solution does not work for me. I have divs inside each tab and they are all hidden. How to I allow divs inside each tab to be visible when the tab is selected?
    Reply ↓
Udara on February 24, 2013 at 13:30 said:

Hi Red,
This is a great tutorial and i used this for my project. unfortunately, got some problems while using. There are some img tags on my tab content and after the activating the tab by click event, i found there are no more img tags on the content. what could be the reason??
Reply ↓
Nick on March 5, 2013 at 12:53 said:

I’m having difficulty modifying this tab switcher. I’m trying to get this look:
http://i47.tinypic.com/35mmt00.jpg
However I can’t seem to add the proper borders. There are different layers with z-indeces which confuse me :(
Anyone willing to help? :)
Reply ↓
- Catalin Rosu on March 5, 2013 at 23:04 said:
  
  Nick, as I notice, the look you’re trying to achieve is pretty similar to the one presented in this article.
  So, beside using :after:, you’ll also need the ::before pseudo element which is basically a flipped version of :after:.
  Maybe this tutorial I wrote on building CSS3 breadcrumbs will help you.
  Good luck!
  Reply ↓
Bart on March 18, 2013 at 20:51 said:

Hi,
Great tutorial, very nice :)
But when I want to make 2 diffrent columns in a tab disappears all the text.
Can you help me?
Reply ↓
Clement on April 2, 2013 at 13:07 said:

Hi red, thanks for this amazing tutorial.
I need to implement 2 tabs on a same page but of different sizes (one is 250px width, another one 6700px, one displays list, the other displays informations), is it possible by changing the class id of the second tab ? I tried it but actually it does’nt seem to work…
Thanks
Reply ↓
- Catalin Rosu on April 2, 2013 at 14:50 said:
  Clement,
  It’s not rocket science. At all. Here’s a working example:
```
 <a href="#" name="tab2" style="width: 200px;">Two</a>
```
  Good luck!
  Reply ↓
cn arabia on April 2, 2013 at 14:56 said:

Really great tabs tutorial. Will publish this soon on my blog too….
Reply ↓
Clement on April 2, 2013 at 18:22 said:

Hi again, I think I didn’t express very well my request : I would ask you how to include two folder tabs without confusion between them ?
I tried to use “tab1 to tab5″ for the folder tabs n°1 and “tab6 to tab10″ for the other one, but it doesn’t work at all, even if i give the second folder new id and CSS classes…
Thanks for your answer
Reply ↓
- Catalin Rosu on April 3, 2013 at 09:59 said:
  
  I see… I guess that could be solved by transforming the jQuery above into a plugin. This way you’ll be able to use multiple tab navigation in one page.
  Reply ↓
samuel Tadesse on April 5, 2013 at 13:38 said:

great work. easily understandable tutorial 10Q
Reply ↓
Jon on April 11, 2013 at 16:57 said:

Perfect for what I was looking for. How do I change the default tab? So if I want to display the second tab on page load.
Thanks!
Reply ↓
Jon on April 11, 2013 at 17:05 said:

Ok I think I found my own answer. In the jQuery I replaced First with eq(1) . It’s zero based so eq(0) would be the first tab, etc. Thanks again for this tutorial.
Reply ↓
César on April 27, 2013 at 22:09 said:

To prevent jump to the top on click tab i solved it changing the order of lines for show new tab before hide another one. Like this:
$(“#tabs li”).attr(“id”,”"); //Reset id’s
$(this).parent().attr(“id”,”current”); // Activate this
$(‘#’ + $(this).attr(‘name’)).fadeIn(); // Show content for current tab
$(“#content div”).not(‘#’ + $(this).attr(‘name’)).hide(); //Hide all content
Note: i’ll hide all, except fadeIn div showed
Reply ↓
Yelsyn on May 4, 2013 at 00:01 said:

As I can pass paremeters the div I want to activate, for example
I’m on the second div I have a form and record after record data and loading the page to activate the second div
Reply ↓