Question

I have some html and JQuery that is used to create a page with tabbed content. The html is below:

<section id="content" class="content">
    <ul class="tabs group">
         <li><a href="#">Tab 1</a></li>
         <li><a href="#">Tab 2</a></li>
         <li><a href="#">Tab 3</a></li>
    </ul>
    <div class="panes">
         <div class="group">
              tab1
         </div>         
         <div class="group">
              tab2
         </div>         
         <div class="group">
              tab3
         </div>   
    </div>
</section>

The JQuery is here:

<script type="text/javascript">
        $(document).ready(function () {        
            $('.activetab a').each(function () {
                var activeTab = $(this).parents('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
            });

            $('.tabs a').click(function () {           
                $(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); var activeTab = $(this).parent('li').index();
                var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab);
                paneVisible.show().siblings().hide();
                return false;
            });
        });
    </script>  

This code works in the sense that when I click on one of the links the data in the correct tab appears.

The only problem is that when I go to the page (containing these tabs) for the first time I get the data from all the tabs displayed to me. I need some extra code in my document ready function to display the data from the first tab and hide all the other data (and of course to highlight the first tab as well). Any ideas how I may do this. I am no JQuery/JavaScript expert.

Thanks,

Sachin

Answer 1

Just add the activetab class to one of the <li> elements inside the ul.tabs, like this:

<li class="activetab"><a href="#">Tab 1</a></li>

You can see it here in action: http://jsfiddle.net/CAAFZ/