# Problem with manipulating DOM w/ JS, .onclick event

**URL:** https://forum.kirupa.com/t/problem-with-manipulating-dom-w-js-onclick-event/275813
**Category:** web dev
**Created:** [November 18, 2008, 10:39pm UTC](https://forum.kirupa.com/t/problem-with-manipulating-dom-w-js-onclick-event/275813 "2008-11-18T22:39:27Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![creativeFuzion](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/creativefuzion/32/1385_2.png) [@creativeFuzion](https://forum.kirupa.com/u/creativeFuzion)
#### Post date: [November 18, 2008, 10:39pm UTC](https://forum.kirupa.com/t/problem-with-manipulating-dom-w-js-onclick-event/275813/1 "2008-11-18T22:39:27Z")

</div>

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:

```auto

<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:

```auto

<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!