While Slide down I need to change height of another div relative to the slide down height
<p>I need to change the height of one Div dynamically, Based on the height of slide down of another element in another div without reloading,</p>

<p>ie when I click on the slide down element the element must slide down and on the same instance height of another div must be setted as the height slide down and slide up,</p>

<p>here is my code </p>

<pre><code>$(window).load(function() {
var mainheight = $('.main-content-area').height();
var sideheight = $('.side-bar').height();
if(mainheight &gt; sideheight) {   
$('.side-bar').css('height',  mainheight + 10);
}
else $('.sidebar').css('height', 'auto');
    //Slide toggle for the a page
$('.toggle-row h3').click(function() {
    $(this).next('.row-content').slideToggle(300);
    $(this).children('.right-arrow').toggleClass('down-arrow');
    if (mainheight &gt; sideheight){
        $('.side-bar').css('height', mainheight +10);
    }
    else {
        $('.side-bar').css('height', sideheight);   
    }
});


});
</code></pre>
