Space Left After "display:none" , .remove(), removeChild(), and ".hide()"

JavaScript
1

Hello,

Here is my page http://www.trulysaid.com/TSWP/index.php.

I 'd like to be able to click the black button and 1.) hide the page header 2.) show the black navigation area 3.) hide the main content and page footer content (and the opposite will happen when I click the white button).

It works fine, but when the main content and footer content areas are hidden, the spaces they occupied are still there (plus additional space), even though the content is gone.

I have tried .remove(), .removeChild(), “display:none”, and .hide(). The previously occupied space still remains. Here is my latest attempt:

$('#menu-button').click(function() {
	$('#main-navigation').fadeIn() && $('#page-header').fadeOut();
	$("#main-content").hide();
	$("#page-footer").hide();

});

$('#close-button').click(function() {
	$('#main-navigation').fadeOut() && $('#page-header').fadeIn();
	$("#main-content").show();
	$("#page-footer").show();
});

Please help if you can. Thanks.

2

Hi there,

Welcome to the forums :slight_smile:

I 'd like to be able to click the black button and 1.) hide the page header 2.) show the black navigation area 3.) hide the main content and page footer content (and the opposite will happen when I click the white button).

It seems to be working fine for me on the latest Chrome.
Is there a specific problem you are having or am I missing something?