Onclick change in javascript

[printline]

Hi'

I have a little problem with the onclick event. I have an image that i use as a button. When i click this image/button some text appears and a new image/button also appears. when i then click the new image/button the text should disapper again.

I have gotten so far as to getting the text to appear, but can't quite figure out how to make it disappear again, with the new button.

Please help, thank You.

Here is my code:

[HTML]<script>
function MakeVisible()
{
document.all.DivId1.style.display='';
}
</script>

<img src="advsearchturnon.gif" border="0" onclick="MakeVisible()" name="search" ONMOUSEDOWN="document.images['search'].src='advsearchturnoff.gif'" />

<div id="DivId1" style="display:none;">
<table>
<tr>
<td>With any of the words/numbers:</td>
<td><input name="search" type="text" size="20" /></td>
<td><img src="seperator.gif" width="1" height="110" /></td>
<td><b>A combination of:</b>
<br /><input name="jobnbr" type="checkbox" value="" />Job Nbr.<br /><input name="PO Nbr." type="checkbox" value="" />PO Nbr.<br /><input name="Part Nbr." type="checkbox" value="" />Part Nbr.<br /><input name="Ship Via" type="checkbox" value="" />Ship Via</td>
<td><img src="seperator.gif" width="1" height="110" /></td>
<td><b>Lines to display:</b><br />
<select name="lines" size="1">
<option selected="selected">10 per page</option>
<option>15 per page</option>
<option>25 per page</option>
<option>50 per page</option>
<option>75 per page</option>
<option>100 per page</option>
</select>
<br />
<b>Show results by:</b><br />
<select name="lines" size="1">
<option selected="selected">Job Nbr.</option>
<option>PO Nbr.</option>
<option>Part Nbr.</option>
<option>Ship Via</option>
<option>Tracking Nbr.</option>
</select> </td>
<td><img src="seperator.gif" width="1" height="110" /></td>
<td><img src="search.gif" /></td>
</tr>
<tr>
<td>With the exact phrase/number:</td>
<td><input name="search" type="text" size="20" /></td>
</tr>
</table>
</div>[/HTML]

[acoder]

Don't use document.all. use document.getElementById instead:

document.getElementById("DivId1").display=...

In the button that is displayed, just add an onclick that has the following:

document.getElementById("DivId1").display='none';

[printline]

Don't use document.all. use document.getElementById instead:

document.getElementById("DivId1").display=...

In the button that is displayed, just add an onclick that has the following:

document.getElementById("DivId1").display='none';

Could You perhaps elaborate a bit, i'm a quite new at javascript..... I tried adding document.getElementById("DivId1").display=('none') ; but that didn't work....

Also i can't have two onclick events in my button. What i have now, to make the button change is:

<img src="advsearchturnon.gif" border="0" onclick="MakeVisible()" name="search" ONMOUSEDOWN="document.images['search'].src='advsearchturnoff.gif'" />

[acoder]

Sorry, that was a mistake. It should be:

document.getElementById("divId1").style.display='none';