Adjust window height on click

Question

I have a div #more with width 100% and height auto that wraps my content.

I want that div to resize to adjust window height on a link click.

My script almost works, I click on the link, i see the scrollbar getting smaller (proof that the window has resized BUT the div resizes only after the first scroll action...why is that ? :(

SCRIPT

$(document).ready(function(){
            $( "#target" ).click(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  $('#more').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  $(window).resize(function() {
    $('#more').each(function(){
      resizeSection(this);
    });
  });
});
});

And this is the trigger : <div id="target">click</div>

Answer 1

I found a good way of making this happen, and the container resizes to fit window height very smooth and likable.

$('.more').click(function(){
    var isFullscreen = false;
    var d = {};
    var speed = 900; 
    if(!isFullscreen){ // MAXIMIZATION - maximize the container to fit window
        d.height = $(window).height();; 
        isFullscreen = true;
    }
    else{ // MINIMIZATION - minimize the container to a predifined size   
        d.height = 500px;            
        isFullscreen = false;
    }

    $(this).animate(d,speed)
    })