fiddle 101

by Nibin George

HTML

<div class="box tabs siteBackgroundColor">
                                <div class="box_header">
                                    <ul class="tab_nav">
                                        <li class="dummyTab"><a href=".tab1" class="iconTab">&nbsp;</a></li>

                                        <li><a href=".tab2"class="iconTab iconTabWifi">&nbsp;</a></li>
                                        <li><a href=".tab3"class="iconTab iconTabWeb">&nbsp;</a></li>
                                        <li><a href=".tab2"class="iconTab iconTabHours">&nbsp;</a></li>
                                        <li><a href=".tab4"class="iconTab iconTabMap">&nbsp;</a></li>
                                        <li><a href=".tab3"class="iconTab iconTabPhone">&nbsp;</a></li>
                                        <li><a href=".tab4"class="iconTab iconTabShare">&nbsp;</a></li>
                                    </ul>
                                </div>
                                <div class="box_content tab_content tab1 dummyTab"></div>
                                <div class="box_content tab_content tab2">
                                    <p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
                                </div>
                                <div class="box_content tab_content tab3">3<br/>3<br/>3<br/>3</div>
                                <div class="box_content tab_content tab4">4<br/>4<br/>4<br/>4<br/>4</div>
                            </div>

JavaScript

$(document).ready(function(){
$('.tabs').each(function(){
    var tab = $(this);
    tab.find('.tab_content').hide(); // Hide all divs

    tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
        tab.find('ul.tab_nav li').removeClass('current_tab'); // Remove active class from all links
        $(this).parent().addClass('current_tab'); //Set clicked link class to active

        var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link

        tab.find('.tab_content').slideUp(); // Hide all divs
        $(currentTab).slideDown(); // Show div with id equal to variable currentTab
        return false;
    });
});
});