jQuery

Fading tabs with Jquery and CSS


I welcome you to another useful tutorial. This time it’s about how to create tabs with jquery. Just like any other tutorial this also comes from one of my project. I had a requirement to create tabbed content and this is what I came out with. It is on production and good to start using in your websites.

Please take a look at the demo below before we proceed on to how we can do it using this tutorial.

First we write the HTML code.

Take a look at the code below.

<div class="tabwrapper">
            <div class="tabs_links">
                <ul>
                    <li><a href="#tab1">Events</a></li>

                    <li><a  href="#tab2">News</a></li>
                </ul>
            </div>
           
            <div class="tab_content" id="tab1" style="display:none" >
                <ul>
               
                                                                       
                                                                       
                    <li>
                        <div class="thumb">
                            <a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-25-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-25" title="untitled (1 of 1)-25" /></a>

                         </div>
                         <div class="descripton">
                            <h6><a href="#">Pre-School Registration Info for 2012-13</a></h6>
                            <em>(Posted on Tue, 03/01/2012)</em>
                            Classes are assigned based on the child’s age on September &raquo;
                        </div>
                    </li>

                   
                                                                       
                    <li>
                        <div class="thumb">
                            <a href="#""><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/new-year-2012-53x53.gif" class="attachment-news-thumb wp-post-image" alt="new-year-2012" title="new-year-2012" /></a>
                         </div>
                         <div class="descripton">
                            <h6><a href="#"">School Starts on the 5th of January</a></h6>
                            <em>(Posted on Tue, 03/01/2012)</em>
                            Happy New Year to you and like you we are &raquo;

                        </div>
                    </li>
                   
                                                                       
                    <li>
                        <div class="thumb">
                            <a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-36-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-36" title="untitled (1 of 1)-36" /></a>
                         </div>
                         <div class="descripton">
                            <h6><a href="#">New Website for FCS</a></h6>

                            <em>(Posted on Tue, 03/01/2012)</em>
                            New Year brings lots of new things in life, and &raquo;
                        </div>
                    </li>
                   
                                                                                                                           
                </ul>
                <div class="clear"></div>
            </div>
           
            <div class="tab_content" id="tab2" style="display:none" >

                <ul>
                                                                       
                                                                       
                    <li>
                        <div class="thumb">
                            <a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-25-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-25" title="untitled (1 of 1)-25" /></a>
                         </div>
                         <div class="descripton">
                            <h6><a href="#">Pre-School Registration Info for 2012-13</a></h6>
                            <em>(Posted on Tue, 03/01/2012)</em>

                            Classes are assigned based on the child’s age on September &raquo;
                        </div>
                    </li>
                   
                                                                                                                           
                </ul>
                <div class="clear"></div>
            </div>
           
        </div>

We first create a div with class tabs_links. This has two anchor elements which on clicking will link us to #tabs. We have mentioned this in the href attribute. The first tab is given an ID as tab1 and the second as tab2. You can keep going on in this manner to how many ever tabs you want. We be using the tab IDs in jquery later.

Next we will create two divs with class tab_content and give them their IDs. You put one div after the other and close them. Now remember the anchor tags which had their hyperlink href value as #tab IDs . So here you gotta give the divs tab_content with their specific IDs. This is how we will link the anchor tags with their respective tab_content divs. What you put inside the tab_content div is upto you. For this example I have created a list item according to my requirement. Also if you have noticed I have put an inline styling and changed the display to none. I know that this is not the best method. I’ll be hiding them using jquery also. But this inline styling is just a fallback incase the jquery doesn’t work because of some reason. We don’t wanna see a broken page do we?

Next comes the styling.

Just to make things prettier I have used the following CSS. This tutorial is focused on how to create the tabs and not styling them. So I’ll be explaining the jquery part in detail which is coming next.

.tabwrapper {
    float: left;
    width: 350px;
    margin: 20px 0 0 0;
}

.tabs_links {
    height: 34px;
    padding-bottom: 2px;
    width: 350px;
}

.tabs_links ul {
    float: left;
    margin-left: 1px;
}

.tabs_links ul li {
    float: left;
    margin-top: 2px;
}

.tabs_links ul li a, .tabs_links_two ul li a {
    background-image: url("images/tabsep.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    color: #222427;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 33px;
    margin-top: 2px;
    padding: 0 22px;
}

.tabs_links ul li a:hover, .tabs_links ul li.active a {
    background: rgba(247,247,247,0.5);
    border-left: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
    border-top: 1px solid #D5D5D5;
    color: #FFFFFF;
    left: -1px;
    line-height: 32px;
    padding: 0 20px 0 22px;
    position: relative;
}

.tab_content {
    background: rgba(247,247,247,0.5);
    border: 1px solid #D5D5D5;
    padding-bottom: 16px;
    width: 348px;
}

.tab_content ul {
    float: left;
    padding: 10px 0 0 15px;
}

.tab_content li {
    border-bottom: 1px solid #E1E1E1;
    float: left;
    padding: 12px 0 4px 1px;
    width: 322px;
}

.tab_content li .thumb img {
    border: 1px solid #D5D5D5;
}

.tab_content li .thumb {
    float: left;
    padding-top: 7px;
    width: 55px;
}

.tab_content li .descripton {
    float: right;
    width: 253px;
    font-size: 12px;
}

.tab_content li .descripton h6{
    margin: 0 0 5px 0;
}

.tab_content li .descripton a{
    font-size: 13px;
    color: #333333;
}

.tab_content li .descripton em{
    display: block;
    opacity:0.5;
    margin: 0 0 3px 0;
}

We do the Magic here!

Now to hide and display the tabs when the respective anchor tags are clicked we will be using Jquery. First take a look at the jquery code below, after which I’ll be explaining one line at a time in detail.

$(document).ready(function() {
   
    $(".tab_content").hide(); //Hide all content
    $(".tabs_links ul li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $(".tabs_links ul li").click(function() {
        $(".tabs_links ul li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });
   
});

While writing the html code I told I’ll be hiding the divs with class tab_content using jquery though there is an inline styling. That’s what the first line is doing. We find all the divs with tab_content class and hide them.

$(".tab_content").hide(); //Hide all content

In the second line we are setting the first anchor tag to active. Because we have styled the li element in CSS I am finding the first li element which has the first anchor tag and add a class named active, so that it looks highlighted. Next we show it using the show jquery function just in case.

$(".tabs_links ul li:first").addClass("active").show(); //Activate first tab

In the third line we are selecting the first tab_content and showing it. We do it with the :first pseudo code. This will override the inline CSS we wrote earlier.

$(".tab_content:first").show(); //Show first tab content

Now for some action.
Now when any of the li element is clicked we need some function to be executed. And that is what we do here by creating a click function for the li elements under tabs_links div. Inside this function we can put all the codes we want to execute when the li element is clicked.

$(".tabs_links ul li").click(function() {
});

First we remove the active class from the li element.

$(".tabs_links ul li").removeClass("active"); //Remove any "active" class

Then to the li element that was clicked we add the active class. That is why we use this jquery selector to find the li element here. this selector refers to the element to which function is associated with.

$(this).addClass("active"); //Add "active" class to selected tab

Then we hide all the tab_content divs. So that in the next step we can find which li element was clicked and show the relative tab_content.

$(".tab_content").hide(); //Hide all tab content

Now we simply create a variable named activeTab. This will hold the href attribute value of the anchor element whose parent – li element was clicked. We again use this jquery selector to find the li element which was clicked. Then we find the anchor element inside it with the find jquery function. We further reach the href attribute by using the attr jquery function.

Now the variable activeTab holds href attribure value (which would be an ID).

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

Next step is to simply find the ID stored in activeTab variable and fade in using the fadeIn jquery function.

$(activeTab).fadeIn(); //Fade in the active content

All in all with just 14 lines of code we are able to create the most simple and elegant tabs using jquery. If you could further squeeze down the lines and give better results please let me know in the comments.

Hope this tutorial was useful as other. Do let me know that too. Thanks! See ya!

Latest Comments

Leave a Reply

comment on this article