JQuery - Dynamic Tabs / Grow-Upwards Example

by Luis Valle

HTML

<div style="height:50px;">    
</div>
<div id="dvTabHolder" style="height:38px;border-bottom:2px solid orange;width:100%;">
    <span id="tab1" class="tabGroup" style="height:20px;margin-left:15px;">HOME</span>
    <span id="tab2" class="tabGroup" style="height:20px;">Codes</span>
    <span id="tab3" class="tabGroup" style="height:20px;">Sections</span>
    <span id="tab4" class="tabGroup" style="height:20px;">Rules</span>
</div>
<div style="padding:40px;border:2px solid orange;border-top:0px;background-color:#BFEDF9;">
    <span id="lblResult"></span>
</div>

CSS

.tabGroup {    
    padding: 8px;
    font-family: Arial;
    font-size: small;
    color: white;
    background-color: grey;
    border: 2px solid orange;
    cursor: pointer;
    float: left;
    margin-left: 1px;
}
span {
    font-family: Arial;
}

JavaScript

$(document).ready(function () {
    $('.tabGroup').mouseover(function () {
        var xTabme = this;
        if (!$(xTabme).hasClass('selectedTab')) {
            $(xTabme).css({
                'border-top': '2px solid red',
                'background-color': 'black'
            });
            
            $(xTabme).animate({
                'height': '30px',
                'margin-top': '-10px'
            }, 'fast', function () {
                
            });
        }
    });
    
    $('.tabGroup').mouseout(function () {
        var xTabme = this;
        if (!$(xTabme).hasClass('selectedTab')) {
            $(xTabme).stop().css({
                'height': '20px',
                'margin-top': '0px'
            });
            $('.tabGroup').each(function () {
                if (!$(this).hasClass('selectedTab')) {
                    $(this).css({
                        'border-top': '2px solid orange',
                        'background-color': 'grey'
                    });
                }
            });
        }
    });
    
    $('.tabGroup').on('click', function () {
        var xTabme = this;
        if (!$(xTabme).hasClass('selectedTab')) {
            $('.tabGroup').removeClass('selectedTab');
            $(xTabme).addClass('selectedTab');
            $('.tabGroup').css({
                'height': '20px',
                'margin-top': '0px',
                'border-top': '2px solid orange',
                'background-color': 'grey'
            });
            $(xTabme).css({
                'border-top': '2px solid red',
                'background-color': '#1086A4',
                'height': '30px',
                'margin-top': '-10px'
            });
            
            $('#lblResult').html('You clicked on the "' + $(xTabme).text() + '" tab.');
        }
    });
    
    $('.tabGroup').first().trigger('click');
});