SharePoint: jQuery toggle removing all SharePoint top divs, leaves space on bottom of web page?

Question

So I have a jquery toggle event on a button for a SharePoint 2010 page. If clicked it just hides the SharePoint constructs:

$('#s4-topheader2,#s4-titlerow,#RibbonContainer,#s4-ribbonrow').toggle(500);

works fine, but after it is used the web page doesn't reach to the bottom of the page anymore? only after the top divs are brought back. So I am guessing there is a little piece I could add to get around this? why is this the case?

Answer 1

Your code works fine for me in IE and Chrome but if you want to re-size s4-workspace manually you should re-size after the animation has finished like:

$('#s4-topheader2,#s4-titlerow,#RibbonContainer,#s4-ribbonrow').toggle(500, function(){
    $('#s4-workspace').height($(window).height());
});