I've taken some code from here:

http://www.webwinnerdesigns.com/js-s...orm.html#myrow

To help show/hide a form element. What I have is a link and clicking it will open another form containing a text input and button:

Code:
<form id="form" name="form" action="<?php echo $PHP_SELF;?>" method="post">
<label>Email</label><input type="text" name="email" id="email" />
<label>Password</label><input type="password" name="password" id="password" />
<input name="login" value="Login" type="submit"><br />
<a href="#forgotten" onClick="toggle_it('forgotten')">Cant remember</a> | <a href="index.php#register">Register</a>
<form id="forgotten">
<label style="display:none;">Email</label><input type="text" name="forgotten" style="display:none;" />
<input name="remind" value="Remind" type="submit" style="display:none;"><br />
</form>
So as you can see, there are 2 forms. The first form has a link 'cant remember' which on click will open form 2, thus allowing the user to submit their email for forgotten password link.

At the moment the show/hide is just not working. I've tried adding 'id=forgotten' to each element in the form, to only one element, to just the form - nothing is working.

How can I fix this??

By the way, the toggle script is:

Code:
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = '';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
Any help would be awesome - thanks!