Hi all,

Working with a bit of JQuery to remove an element in my design on the click of a button. Simple enough really, except that when I click the button the element disappears but does not take the gap below away with it, thus leaving a space large enough for the element to appear again.

Setting the container element to position:relative in the Chrome Dev tools does the trick but applying the same CSS after the .hide() doesn't do a thing. This leads me to believe it's something not clearing in the viewport.

Below is my current code:

Code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>The Lion Inn</title>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=1"/>	
		<link rel="stylesheet" type="text/css" href="lioninn.css"/>
		<link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css' />
		
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing-1.3.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
var clicked = true;

	$("#navigation").show();
	$("#toggle-menu").click(function(){
		if (clicked == true){

			$("#navigation").hide();
			$("header").css({position:'relative'});
			$("header").css({display:'inline'});
			clicked = false;
		}
		else{
			$("#navigation").show();

		clicked = true;
		}
	});
	
});
		</script>
	</head>
	<body>
		<div id="container">
			<header class="col col12">
				<div class="col col2" style="">
					<div id="logo" style="display:none;">The Lion Inn</div>
					<img src="images/logo-small.png" alt="" class="swap" id="logo-small" />
					<a href="#" id="toggle-menu">Show/Hide Menu</a>
					<div id="navigation">
						<ul>
							<li><a href="#" title="">Home</a></li>
							<li><a href="#" title="">Restaurant &amp; Menus</a></li>
							<li><a href="#" title="">Rooms</a></li>
							<li><a href="#" title="">Gallery</a></li>
							<li><a href="#" title="">Events</a></li>
							<li><a href="#" title="">The Area</a></li>
							<li><a href="#" title="">Contact</a></li>
						</ul>
					</div>
				</div>
				<div class="col col8">
					<nav style="display:none;">
						<ul>
							<li><a href="#" title="">Home</a></li>
							<li>~</li>
							<li><a href="#" title="">Restaurant &amp; Menus</a></li>
							<li>~</li>
							<li><a href="#" title="">Gallery</a></li> 
							<li>~</li>
							<li><a href="#" title="">Events</a></li>
							<li>~</li>
							<li><a href="#" title="">The Area</a></li>
							<li>~</li>
							<li><a href="#" title="">Contact</a></li>
						</ul>
					</nav>
				</div>
			</header>
			<section>
				<div class="col col4">
					<div class="call-to-action">To enquire or book call 01234 567890</div>
					<div class="call-to-action" style="display:none;">Join us for the latest information:</div>
				</div>
			</section>
		</div><!-- end container -->
	</body>
</html>
If you want to try it out with the styles, here it is:

Code:
h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
img{border:0;}
.clear{clear:both;}

/* column width declarations - nm refers to no margin */
.col{float:left; }
.col12{width:100%;}
.col8{width:79%; margin:0.5%;}
.col8nm{width:80%;}
.col6{width:49%; margin:0.5%;}
.col6nm{width:50%;}
.col4{width:24%; margin:0.5%;}
.col4nm{width:25%;}
.col3{width:30.33%; margin:1.5%;}
.col3nm{width:33.33%;}
.col2{width:19%; margin:0.5%;}
.col2nm{width:20%;}
.col1{width:9%; margin:0.5%;}
.col1nm{width:10%;}

@font-face {
    font-family: 'Lusitana', serif;
    font-weight: normal;
    font-style: normal;

}

body{ margin:0;
background-image:url(images/background.png); 
background-color:#3b1313; 
font-family:Arial, Helvetica; 
font-size:1.2rem; line-height:1.2rem; color:#cccccc;}

a:link{color:#faa31b; text-decoration:none;}
a:visited{color:#faa31b; text-decoration:none;}
a:hover{color:#faa31b; text-decoration:underline;}

h1{font-family:'Lusitana', serif; font-size:1.2rem;}

p{line-height:1.2rem;}

#container{margin:5% auto; width:90%; max-width:1280px;}

header{ float:left;
background:#522a2a;
text-shadow: black 0.15em 0.15em 0.2em;
border: 1px solid #3d1414; outline: 2px solid #522a2a;
  -moz-box-shadow:    0px 2px 2px 3px black;
  -webkit-box-shadow: 0px 2px 2px 3px black;
  box-shadow:         0px 2px 2px 3px black;}

nav{font-family:Lusitana;
text-transform:uppercase; 
font-size:1.1em; 
padding-left:0px;
color:#faa31b;
}


nav ul{margin:0; padding:0;}
nav li{display:inline; margin:0 0.5%; text-shadow: black 0.15em 0.15em 0.2em;}

nav ul li a:link{text-decoration:none; font-size:1em; color:#faa31b; line-height:28px;}
nav ul li a:visited{text-decoration:none; color:#faa31b;}
nav  ul li a:hover{border-bottom:1px solid #faa31b; color:#faa31b;}

section{background: rgba(60,19,19,0.5);  background-image:url('images/inner-bg.png'); border:2px solid #522a2a; padding:2%; padding-top:8%;}

#logo{ 
width:165px;
min-width:170px; 
height:277px; 
position:absolute; 
margin-top:-65px;
margin-left:-20px; 
background-image:url(images/logo.png); 
background-repeat:no-repeat;
color:transparent;
font-size:0px;}

/* mobile - landscape */ 
@media only screen and (max-width : 481px) {
#toggle-menu, #navigation{display:none;}

}
/* mobile - portrait */ 
@media only screen and (min-width : 0) and (max-width : 320px) {
.col2, .col4, .col6{width:100%;}
.col4{margin:2% 0;}
.col4 img{display: block;
    margin-left: auto;
    margin-right: auto; width:100%;}
.col6{margin:5% 2% 0 2%;}



h1{font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase;}
h2{font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase;}
p{font-family:'Arial', sans-serif; font-size:1rem; color:white;}


section{padding:0; border:0;}

#logo-small{display:block; margin-left:auto; margin-right:auto;}

#toggle-menu{display:block; margin:4% 0; font-size:1rem; text-align:center;  }
#navigation{display:block; position:relative; width: 98%; height:auto; margin:0; background:; text-align:center;}
#navigation ul{margin:10px 0; padding:0;}
#navigation ul li{list-style-type:none; padding:3%; margin:2%; background:#522a2a; border: 1px solid #3d1414; outline: 2px solid #522a2a;}
#navigation ul li:active, #navigation ul li:hover{background:#3c1313;}
#navigation ul li a:hover{text-decoration:none;}

.call-to-action{margin-top:5%; padding:10px; background:#522a2a; border: 1px solid #3d1414; outline: 2px solid #522a2a; 
font-family:'Lusitana', serif; font-size:1.1rem; color:#faa31b; line-height:1.5rem; text-align:center; text-transform:uppercase;}

.cta{border:4px solid #523131; background:#523131;}
.cta p{margin:3%;}
.ctaBut{display:block; font-family:'Lusitana', serif; font-size:1rem; color:#faa31b; text-transform:uppercase; background:#523131; border:2px solid #3d1414; padding:5px; background-image:url('../images/ctaButBG.png'); background-repeat:no-repeat; background-position:right;}
.ctaBut:hover{background:#3d1414; background-image:url('images/ctaButBG.png'); background-repeat:no-repeat; background-position:right; text-decoration:none;}

footer{width:100%; margin-top:3%; text-align:center;}
footer p img{margin:0 3%;}
}
Any thoughts?

Cheers,

Andrew