How to Make CSS Tabs Work – Animating With JavaScript

~ Anthony Joshua

In my previous tutorial I have explained How to create a simple tab design in CSS. Today we’ll learn about making the tabs work!

If you take websites with tabbed design, most of them will usually refresh the page when displaying the content of that particular tab or simply link the tab with another page. But this is very annoying sometimes and does not offer a good user experience.

tab_animate-3394552

Here are some examples:

Commonwealth Bank:

http://www.commbank.com.au/

Pizzahut:

http://www.pizzahut.com/

So, in order to make the maximum use of the tabbed design, we can display the content relevant to a selected tab in the same page without having to refresh/reload or linking with another. How cool is that?

Today I will explain you how to make your tabs work, without refreshing the page, using Javacript! It’s true that you can download different Javascript libraries that will animate the tabs for you, but have you ever considered writing your own code for that? It’s no rocket science. If you are familiar with the basic Javascript then you can try this out yourself!

For this purpose we will be using the tabbed design we created in the previous Article.

Ok, here’s what should happen when clicking on tabs. When I select a particular tab menu, it should display the tab content DIV relevant to that and hide the rest of the tabs.

For this we will be making use of the CSS Style attribute ‘display’.

First Step

As the first step I will rename my tab menu list with proper id’s like below:

    
    
        Content in Tab 01 goes here.
        Content in Tab 02 goes here.
        Content in Tab 03 goes here.
        Content in Tab 04 goes here.

Second Step

Next we have to write a simple function in Javascript that will display the relevant DIV and hide the rest. I am going to write this function in the simplest way.

        function animate_tab(menuId){
                if(menuId == 'menu-01'){
                        document.getElementById('tab-01').style.display = 'block';
                        document.getElementById('tab-02').style.display = 'none';
                        document.getElementById('tab-03').style.display = 'none';
                        document.getElementById('tab-04').style.display = 'none';
                        document.getElementById('menu-01').className = 'selected';
                        document.getElementById('menu-02').className = 'unselected';
                        document.getElementById('menu-03').className = 'unselected';
                        document.getElementById('menu-04').className = 'unselected';
                }else if(menuId == 'menu-02'){
                        document.getElementById('tab-01').style.display = 'none';
                        document.getElementById('tab-02').style.display = 'block';
                        document.getElementById('tab-03').style.display = 'none';
                        document.getElementById('tab-04').style.display = 'none';
                        document.getElementById('menu-01').className = 'unselected';
                        document.getElementById('menu-02').className = 'selected';
                        document.getElementById('menu-03').className = 'unselected';
                        document.getElementById('menu-04').className = 'unselected';
                }
        }

Likewise add more ‘else if’ blocks to the function to animate all your tabs.

Next we have to call this function when a tab menu is clicked. So for that we are going to replace our

  • tag with the following:

    • Note that the ‘#’ in the href attribute was replaced by ‘javascript:void(0);’. This is a good practice when we want to block the usual function of an anchor tag and call a javascript instead.

    Likewise replace the other

    • tags too accordingly.

      Now you will see that the tabs are actually working without having to reload the page! But if you take a look at the javascript function you will see that lots of lines of code had been repeated several times. This is not considered as a good practice. So I’m going to offer you a more generic algorithm to do the same with lesser number of lines.

      Here’s the modified function.

      function animate_tab(menuId){
        var no_of_tabs = 4+1;
        for(i = 1; i < no_of_tabs; i++){
                menu_id = "menu-0"+i.toString();
                tab_id  = "tab-0"+i.toString();
                if(menu_id == menuId){
                        document.getElementById(menu_id).className  = 'selected';
                        document.getElementById(tab_id).style.display = 'block';
                }else{
                        document.getElementById(menu_id).className  = 'unselected';
                        document.getElementById(tab_id).style.display = 'none';
                }
        }
}

      Here you will see in the first line I have specified as ‘var no_of_tabs = 4+1’. 4 is the number of tabs and I have added 1 more so that it will be easier to write the condition in the’ for loop’ subsequently.

      menu_id = "menu-0"+i.toString();
tab_id  = "tab-0"+i.toString();

      What I have done here is, I have dynamically constructed the tab name and the menu name of each tab with the iterating variable of the ‘For Loop’.

      And there you go! You have an animating CSS tab. Download example Here.

      • Hardware: Intel Core i5 2nd Gen // 4GB DDR2
      • OS: Windows 7 Home Premium // 64 Bit
      • Browser: Google Chrome Version 23.0.1271.91 m

      The beauty of this piece of code is that when compared to the previous version, if you want to add more tabs the changes you have to do are minimal.

      Try this out yourself and share your comments with us.

      Tags: #CSS #Design #JavaScript #Web

    Published by Anthony Joshua