Jquery (tab system) calculate height and add height to a div

I have a tab system (jQuery) with three tabs inside that are differtent in length. Next to this tab, I have a column with a div inside it. I would like if you click on the tab 2 that the div in the column scales in height and when you click tab 1 he scales back.

What I have:

$(".multidomain a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '317px'}, 400).css('overflow-y','scroll');
});

$(".signledomain a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '247px'}, 650).css('overflow-y','scroll');
});

$(".domeinnaam a").click(function() {
    $(".main-vervolg.right .left .domain").animate({ height: '924px'}开发者_如何学运维, 650).css('overflow-y','scroll');
});

this is operates just perfectly in Chrome but in different browsers sometimes the column div is bigger in height then the tab system. So i need someting that is calculating the tab systems height everytime and then add this height to the column div.

Thnx for the help.

$(document).ready(function(){

    $(".tabnav li a").click(function(){  
        var thisNav = $(this);   
        var thisNavIndex = thisNav.parent().index()+1;
        var getTabHeight = $('#tab'+ thisNavIndex).height();        
       $(".main-vervolg.right .left .domain").animate({ height: getTabHeight+'px'}, 650).css('overflow-y','scroll');

        // delete this test//
        $('#test').html( ' The tab height is: '+ getTabHeight +' || The button nav index +1 is: '+ thisNavIndex );  
    });

    // PRODUCTEN TABS
    $('.tabs > ul').tabs({ fx: {  opacity: 'toggle' } });

});

How I did it:

• On click we get the parent li .index()+1 ('cause it's zero based) of the clicked element a.
• Than we just look for the div #tab(+ that index number)
• we calculate his height and we put it into a var getTabHeight
• Than we just animate the column to the calcutated height!

That's it! Happy coding and make me know the results or if you encounter some problems.

EDIT to your comment:

    $('.tabnav li a').click(function(){

        var thisNav = $(this);
        var thisNavIndex = thisNav.parent().index()+1;
        var getTabHeight = $('div#tab'+ thisNavIndex).height();
        var heightRemake = ( $('.top').height()+48 ) + getTabHeight;

        if($('#tab'+ thisNavIndex).is(':visible')) {
            return false;
        }
        $(".main-vervolg.right .left .domain").animate({ height: heightRemake+'px'}, 650).css('overflow-y','scroll');

    });