javascript - コンテンツの高さが変更されたときにコンテナ div の高さを動的に変更する

Question

さまざまなセクションを持つ Web サイトがあり、それぞれがブラウザー ウィンドウの高さに設定されています。場合によっては、コンテンツがブラウザー ウィンドウよりも高いことがあります。関数を使用してこれを確認し、次の関数を使用して div の高さをコンテンツの高さに設定します。

$('.container').each(function() {
        var _this = $(this);
        var this_ = this;
        var windowH = $(window).height();
        var textH = $('.text', this).height();
        if(windowH < textH) {                            
            $(this).css({'height': textH + 'px'});
        }
        else {
            $(this).css({'height': windowH + 'px'});
        }
        $(window).resize(function(){
            var windowH = $(window).height();
            var textH = $('.text', this_).height();
            if(windowH < textH) {
                _this.css({'height': textH + 'px'});
            }
            else {
                _this.css('height', windowH + 'px');
            }

        });         
    });

私が抱えている問題は、コンテンツを動的に非表示および表示したいということです。新しいコンテンツが div の現在の高さよりも高い場合、div を展開してそれを含めるようにします。機能を使用していますが、

$('#container').on('click', 'p', function () {
    $(this).height('300px');
    var windowH = $(window).height();
    $('#container').css({
        'height': ($('#container .text').height() + 'px')
    });
    var textH = $('#container').height();
    if (windowH < textH) {
        $('#container').css({
            'height': textH + 'px'
        });
    } else {
        $('#container').css('height', windowH + 'px');
    }

});

しかし、成功しませんでした。フィドルを作成しましたhttp://jsfiddle.net/wDRzY/