Object in WYSIWYG editor is hidden, style display: none

Hi all,

I’m working on a wordpress site and i want to hide something from users but they can view it by clicking on a show more button. My customer needs to maintain the things that are in the div thats hidden. Well bit complex it may sound this way, so ill put the code down here for you that i’m using.

<script language="javascript">
function toggle() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
}
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Well everything works fine. i’ve implemented the javascript in page.php. The show button works and shows in this scenario peek-a-boo perfectly. The problem is, the peek-a-boo has display:none. When my customer needs to change eg peek-a-boo into here i am, he usually goes into the WYSISWYG editor and changes that line. But it ain’t visible over there because it’s not displayed only when you click the show button.

Hope you guys know how to solve this, and understand my problem. In short, the WYSISWYG editor reads html code which i don’t want to.

Thanks in advance,

Wouter