javascript question - innerHTML

[ringo747]

hi guys, having a bit of bother getting a little piece of code to work. The story is that I have a div at the top of a page followed by a checkbox to show/hide it. I am using the following code:
(no idea why its showing a space below in visibility)

<script language="javascript" type="text/javascript">
	function enable_live_preview() 
	{
		if (document.getElementById("preview_option").checked == true) {
			document.getElementById('live_preview').style.visibility= 'visible';
		}	
		else if (document.getElementById("preview_option").checked == false) {
			document.getElementById('live_preview').innerHTML = "";
		}	
	}
</script>

My checkbox code is:

<input type="checkbox" name="preview_option" id="preview_option" checked onchange="enable_live_preview()">Live Preview</input>

The reason why I wanted to use innerHTML is so that when the div is hidden, the rest of the page will flow upwards instead of leaving the white space where the div would have been. When i uncheck the box it works perfectly but when i go to re-enable it it does not display. Is this due to using the innerHTML? Inside the div I have some content which is hard coded at the moment. I'm confused as to why it all disappears and will not reappear. Will the innerHTML = "" replace my content in the div and not allow it to be replaced?

Thanks
(hope this desciption isn't too confusing)

 

[ringo747]

Actually just solved this quite easily by using the style.display attribute and setting it to hide and inline.

Ignore the above please!