Change Div Height When Tab Is Selected

I have a tabbed content that has 4 tabs and in each there are going to be two divs that make up the border design. The problem that I'm running into is that I have no idea how to a

Solution 1:

Here is a jquery solution to your problem, just in case you need it. JS fiddle: http://jsfiddle.net/nPAhw/

html

<ul><liid="tab1">Tab One</li><liid="tab2">Tab Two</li></ul><divid="tabone">Tab one</div><divid="tabtwo">Tab Two</div>

css

#tabone{
    width:200px;
    height:38px;
    border:solid blue;
    margin:10px;
}
#tabtwo{
    width:200px;
    height:38px;
    border:solid black;
    margin:10px;
}
#tab1:hover{
    cursor:pointer;
}
#tab2:hover{
    cursor:pointer;
}

jquery / javascript

$('#tab1').click(function(){
    var h = $('#tabone').height();
    if(h < 185){    
        $('#tabone').animate({height:'185px'});
        $('#tabtwo').animate({height:'38px'});
    }
    else $('#tabone').animate({height:'38px'});
});

$('#tab2').click(function(){
    var h = $('#tabtwo').height();
    if(h < 185){    
        $('#tabtwo').animate({height:'185px'});
        $('#tabone').animate({height:'38px'});
    }
else $('#tabtwo').animate({height:'38px'});
});

Solution 2:

You would want to use the Jquery Animate method.

This method can perform animation effects on any numeric CSS property, like for example, height, which is what you want to achieve.

$( ".element-class" ).animate({
  height: "185px"
}, 500);