Problem with manipulating DOM w/ JS, .onclick event

programming web dev
1

I have a .php page, with a contact form that can be toggled to show and hide using some simple jQuery. I have a div that users can click to hide/show the contact form, which is held inside another div. I can get the form to hide successfully, and the innerHTML changes to “Show” [Contact Form]. The problem is that I can’t get the onClick attribute to change to showDiv(‘toggleContact’). Here’s the code:

Javascript Functions:


<script type="text/javascript">
	function hideDiv($div) {
		document.getElementById("changeText").innerHTML = "Show";
		var toggleText = document.getElementById("toggleForm");
		toggleText.onclick = "showDiv('toggleContact')";
		Effect.toggle($div, 'blind');
	}
	function showDiv($div) {
		document.getElementById("changeText").innerHTML = "Hide";
		var toggleText = document.getElementById("toggleForm");
		toggleText.onclick = "hideDiv('toggleContact')";
		Effect.toggle($div, 'blind');
	}
</script>

HTML Code:


<p><a href="javascript:void(0);" onClick="hideDiv('toggleContact');" id="toggleForm" class="toggleContactForm">&raquo; <span id="changeText">Hide</span> Contact Form</a></p>
				
			</div>
			
			<div id="toggleContact"> ...[contact form html]... </div>

I’m just starting out with javascript, so any help would be great, thanks!