Animated tabbed content with jQuery

A lot of websites on the Internet have tabbed content now a days. The problem I find with most of them is that most of the time they can be quite dull. For my new looks I created a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.

Animated tabbed content with jQuery

Download Tabbed Content zip-archive Example View the Tabbed Content in action!

In this tutorial I am going to show you some web development techniques that can be used in your next projects. This will cover some CSS, HTML and jQuery tricks.

The sources of this tutorial are downloadable here: http://www.gayadesign.com/scripts/tabbed/tabbedContent.zip

Example of the outcome is found here: http://www.gayadesign.com/scripts/tabbed/

First thing we need is some basic HTML layout to fit what we are going to make.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Tabbed content</title>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

    <link href='css/tabbedContent.css' rel='stylesheet' type='text/css' />
    <script src="js/tabbedContent.js" type="text/javascript"></script>
</head>

<body>

</body>
</html>

I already included jQuery and other files in the head section. We'll be making these files step by step in the next few minutes.

Next thing we need to do is create the structure of the document. What we need is a container with the tabs and a container which the content will that switch if we change tabs.
As a nice feature to enhance this all we'll use a tab background that will move to the choice the user makes. While this tab moves, the content will also change to the selected tab.

For this we need a container containing the tabs and the background, a container containing the content and container that prevents the content to be shown prematurely.

Take a look at the following code:

<div class='tabbed_content'>
    <div class='tabs'>
        <div class='moving_bg'>
            &nbsp;
        </div>
        <span class='tab_item'>
        Tab one
        </span>
        <span class='tab_item'>
        Tab two
        </span>
        <span class='tab_item'>
        Tab three
        </span>
        <span class='tab_item'>
        Tab four
        </span>
    </div>

    <div class='slide_content'>
        <div class='tabslider'>

            <!-- content goes here -->

        </div>
    </div>
</div>

It's time to do a little styling to the tabs section and the overall container. Note that in the next part I am going to use an image which is included in the source archive. This will enhance the looks of the tabbed container.

This following CSS will make the tabs appear as tabs:

.tabbed_content {
    background-color: #000000;
    width: 620px;
}

.tabs {
    height: 62px;
    position: relative;
}

.tabs .moving_bg {
    background-color:#7F822A;
    background-image:url(../images/arrow_down_green.gif);
    background-position: bottom left;
    background-repeat: no-repeat;
    left: 0;
    padding: 15px;
    padding-bottom: 29px;
    position: absolute;
    width: 125px;
    z-index: 190;
}

.tabs .tab_item {
    display: block;
    float: left;
    padding: 15px;
    width: 125px;
    color: #ffffff;
    text-align: center;
    z-index: 200;
    position: relative;
    cursor: pointer;
}

Note that the tab container has a position of relative to make the moving background position to it. Now we can easily move the moving background using the left property.

In the next part we are going to add the first few lines of Javascript to the tabbedContent.js file to create a mouseover effect on the tab items.

Use this code as a skeleton:

var TabbedContent = {
    init: function() {

    },

    slideContent: function(obj) {

    }
}

$(document).ready(function() {
    TabbedContent.init();
});

This code is will execute the init function once the page is loaded.

Now we need to make is so that the moving background moves to the tab item which is hovered on. Implement the following code:

$(".tab_item").mouseover(function() {

    var background = $(this).parent().find(".moving_bg");

    $(background).stop().animate({
        left: $(this).position()['left']
    }, {
        duration: 300
    });

    TabbedContent.slideContent($(this));

});

This will make all the items with the class tab_item behave as if it was a tab. It also moves the moving background to the right position, matching the left property with that of the tab.

TabbedContent.slideContent($(this)); will make the content switch in a few steps. We'll get to that.

Next up is creating the content and it's CSS. The content goes in the place we put .

<ul>
    <li>
        This matches the first tab
    </li>
</ul>
<ul>
    <li>
        This matches the second tab
    </li>
</ul>
<ul>
    <li>
        This matches the third tab
    </li>
</ul>
<ul>
    <li>
        This matches the fourth tab
    </li>
</ul>

And the matching CSS:

.tabbed_content .slide_content {
    overflow: hidden;
    background-color: #000000;
    padding: 20px 0 20px 20px;
    position: relative;
    width: 600px;
}

.tabslider {
    width: 5000px;
}

.tabslider ul {
    float: left;
    width: 560px;
    margin: 0px;
    padding: 0px;
    margin-right: 40px;
}

.tabslider ul a {
    color: #ffffff;
    text-decoration: none;
}

.tabslider ul a:hover {
    color: #aaaaaa;
}

.tabslider ul li {
    padding-bottom: 7px;
}

Note that the content has two containers. One is for the overall wrapping and the other for making the content move as we hover over the items.

The top container has an overflow of hidden, which makes any content that goes out of it's limits hidden. The container below that will hold the content that will be hidden.

Now we are going to make the content scroll to the right position as we did with the tabs.

It's time to fill up the slideContent function:

var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;

$(obj).parent().parent().find(".tabslider").stop().animate({
    marginLeft: margin + "px"
}, {
    duration: 300
});

The margin needed for the slider to move is calculated in this function. It has been made so that you can change the widths of several containers in the result, it will scroll to the right position automatically.

Take another looks at the source for references.

Good luck with making your own tabbed content in your future projects.

Liked this article? Sharing is caring!

148 Comments on this subject

  1. evan said:

    Awesome man! I would make the area which determines the slider to move to be the <a> rather than the <div>. If content is too far over to the left then mouse could hit the next sections causing the content to change unwarranted.

    Evan

  2. The effect is super slick and pretty original, different from most tabs I have seen. Keep up this kind of material Gaya, I really enjoy it!

    As for the flaw with JavaScript being disabled, you could try setting the overflow to hidden with JS and set the default CSS to scroll so the user could scroll through the content. Haven’t tested this, just a quick ide from a glance at the demo and code.

    Great work!

  3. Gaya said:

    Hi Drew!

    Thanks for checking out the article and commenting! Much appreciated :D

    As for the fix to the problem; it is a solution worth trying. Maybe even make the tabs scrollable with them. I sometimes wonder how many people don’t use Javascript these days.

  4. dtr said:

    Great stuff mate, nice to see someone this creative. Everything work like a charm, but in firefox there’s a problem when you insert the . Keep the great job.

  5. dlv said:

    thanks Gaya, it’s a great menu, it’s what i was looking for… i’m using it in my website and looks great

    thanks for share it!!

    PD: a have little question, when you use the menu and click on a tab link, when page reload, the slide button “.moving_bg” is allways in the first position not showing the new open page.
    There is a way to remember the active page, so “.moving_bg” position match with the open page/category?

    thanks in advance!

    adeux, from argentina

  6. Siddharth said:

    Thanks for your gr8 work. it’s really gr8;

    i have one question: can we use iframe under any tab? i tried but its not showing correctly, please check and update us with ur gr8 work :-) thanks!

    SiD

  7. ukwebguy said:

    This is good stuff! Thank you for sharing. I have just one small problem – it works great with 4 tabs but when I try and extend it to 5 or 6 tabs the content stays withing the original 4 tab width no matter what I do to the content width. Would it be possible to have a few instructions on extending this to more than 4 tabs for those of us who are “CSS challenged”?

  8. Chuck Snyder said:

    Wonderful little tool. Wow’d the boss.

    I was having a problem displaying 12 tabs. After adding the 5th tab (I was testing as i added each one), they started to double up.

    It took a few minutes to realize what was happening, the .tabslider in the css file was set to 5000px. Adding up the width of the tabs comes up to quite a bit more than 5000px, so upped it to 10000px and now it works just fine.

    Thanks for the good work.

  9. Kevin said:

    hi Gaya, no matter how much I try to put your animated tab into my blog, i can’t do it. Could you please look at my theme for me, and tell me what I did wrong. I am willing to donate to you if you can make your animated script work into my theme.

  10. Cingene said:

    I found a Bug.
    When i include the newest jQuery 1.4.2 from Google Apis, then in Opera 10.53 your Script are Problems.
    @gaya: Please test it self with jQuery 1.4.2

Leave your reply

Your email address will not be published. Avatars through Gravatar.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>