Question

I’m currently working on something similar that was posted here.
But for some reason I cannot get it to work when the viewport/browser window is resized. Not too sure if there is something with my CSS or if it’s something else.

Here’s the code that I am using:

$(document).ready(function() {

$('.more').hide();

$('.link').click(function() {
    $(this).next('.more').slideToggle();
}).toggle(function() {
    $(this).children("span").text("[-]");
}, function() {
    $(this).children("span").text("[+]");
    return false;
});
var maxHeight = 0;
$('div.simultaneously').each(function(index) {
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
});
$('div.simultaneously').height(maxHeight);
});​

I’m trying to get the left column (lft-col) to match the height of the hidden div when it slides down. Overall I want the left column div to have the full height of the browser if the viewport is resized. And if the hidden div is slid down, if there is any scroll, I want the left column div to match the height of the right column div is revealed.

Here’s my fiddle: http://jsfiddle.net/sLVsR/5/

If anyone has a different way to approach this, I am all for it as well.

Answer 1

Having re-read your question, I’ve made a few changes to your code

jQuery

$(document).ready(function() {

    $("div.lft-col").height($(window).height()-20); //I've put in -20 just so you can see the div shadow

    $('.more').hide();

    $('.link')
        .click(function() {
            $more = $(this).next('.more');
            $more.slideToggle('slow', function() {
                if ($more.is(":visible"))
                    $("div.lft-col").height($(document).height()-20);
               else
                    $("div.lft-col").height($(window).height()-20);
            });
        })
        .toggle(function() {
            $(this).children("span").text("[-]");
        }, function() {
            $(this).children("span").text("[+]");
            return false;
        });

    $(window).resize(function(){
       $("div.lft-col").height($(document).height()-20);
    });

});​

CSS

#container { 
    /*height: 100%;*/    
}

DEMO