Error In Show hide div Code

[Inny]

I have created a code that works well in a testbed, but my page just wont buy it, after adding it, I cannot connect to that page, no error message. Is it because of javascript inside javascript? Yes I realise Its horrible.
Could this code be much simplified? Please help?
I just want the styled login divs to popup or hide when a link is clicked.

<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 = "Log In";
 }
else {
ele.style.display = "block";
text.innerHTML = "Hide Log In";
}
} 
</script>
<a id="displayText" href="javascript:toggle();">log in</a> 
<div id="toggleText" style="display: none">
<table width="100%" id="userlinks" cellspacing="6">
<tr>
<td width="300px"><b><i>Classifieds</i></b><br>
 (<a href='#ShowLI' onclick="show_LI()" 
>log in</a> | <a href='http://camo-s-classifieds.1047537.n5.nabble.com/user/Register.jtp?nextUrl=http%3A%2F%2Fcamo-s-classifieds.1047537.n5.nabble.com%2F%3Bcid%3D1304002543193-927'>Register</a> )
<style type="text/css">
#LI{
position: absolute;filter: progid:DXImageTransform.Microsoft.Shadow(color=#B5B5B5 ,direction=135);
top: 10px;
left: 10px;
width: 300px;
height: 140px;
visibility: hidden;
border: 0px solid #000;
padding: 0px;
background-image: url(http://i53.tinypic.com/ohjyhh.png);
font-size: 8.0pt;
font-family: verdana;
line-height: 1.7em
}
</style>
<script language="JavaScript">
function show_LI(){
if (document.getElementById)
{document.getElementById("LI").style.visibility = "visible"}
else {document.LI.visibility = "hidden"}
}//ends open function
function hide_LI(){
if (document.getElementById)
{document.getElementById("LI").style.visibility = "hidden";}
else{document.LI.visibility = "hidden";}
}//ends close function
</script>
<div id="LI" align="left">
<form style='display:inline' method="post" action="http://camo-s-classifieds.1047537.n5.nabble.com/template/NamlServlet.jtp?macro=login_page&nextUrl=http%3A%2F%2Fcamo-s-classifieds.1047537.n5.nabble.com%2F%3Bcid%3D1304015910215-171" accept-charset="UTF-8"> 
<input type="hidden" name="macro" value="login_page" /> 
<input type="hidden" id="nextUrl" name="nextUrl" value="http://camo-s-classifieds.1047537.n5.nabble.com/;cid=1304002543193-927"/>
<div class="tableborder">
<div class="mydiv" valign="top">
&nbsp;&nbsp;<b>Welcome!</b>
<p class="expand" valign="top">
<a href="#cancel" onclick="hide_LI()">[X]</a></p></div>
<div class="tablepad">
<b>Classifieds Login</b>
<br>
<input id="email" name="email" size="20" />
<input id="password" name="password" size="20" type="password" />
<input type="submit" value="Login" / onclick="hide_LI()">
&nbsp;
</div></div>
</form>
</div>
<table width="100%" id="userlinks" cellspacing="6">
<tr>
<td width="300px"><b><i>Forum</i></b><br>
 (<a href='#ShowLIF' onclick="show_LIF()" 
>log in</a> | <a href='http://camo-s-reptiles-forum.1047529.n5.nabble.com/user/Register.jtp?nextUrl=http%3A%2F%2Fcamo-s-reptiles-forum.1047529.n5.nabble.com%2F%3Bcid%3D1304041225276-395'>Register</a> )
<style type="text/css">
#LIF{
position: absolute;filter: progid:DXImageTransform.Microsoft.Shadow(color=#B5B5B5 ,direction=135);
top: 10px;
left: 10px;
width: 300px;
height: 140px;
visibility: hidden;
border: 0px solid #000;
padding: 0px;
background-image: url(http://i53.tinypic.com/ohjyhh.png);
font-size: 8.0pt;
font-family: verdana;
line-height: 1.7em
}
</style>
<script language="JavaScript">
function show_LIF(){
if (document.getElementById)
{document.getElementById("LIF").style.visibility = "visible"}
else {document.LIF.visibility = "hidden"}
}//ends open function
function hide_LIF(){
if (document.getElementById)
{document.getElementById("LIF").style.visibility = "hidden";}
else{document.LIF.visibility = "hidden";}
}//ends close function
</script>
<div id="LIF" align="left">
<form style='display:inline' method="post" action="http://camo-s-reptiles-forum.1047529.n5.nabble.com/template/NamlServlet.jtp?macro=login_page&nextUrl=http%3A%2F%2Fcamo-s-reptiles-forum.1047529.n5.nabble.com%2F%3Bcid%3D1304041225276-395" accept-charset="UTF-8"> 
<input type="hidden" name="macro" value="login_page" /> 
<input type="hidden" id="nextUrl" name="nextUrl" value="http://camo-s-reptiles-forum.1047529.n5.nabble.com/;cid=1304041225276-395"/>
<div class="tableborder">
<div class="mydivF" valign="top">
&nbsp;&nbsp;<b>Welcome!</b>
<p class="expand" valign="top">
<a href="#cancel" onclick="hide_LIF()">[X]</a></p></div>
<div class="tablepad">
<b>Forum Login</b>
<br>
<input id="email" name="email" size="20" />
<input id="password" name="password" size="20" type="password" />
<input type="submit" value="Login" / onclick="hide_LIF()">
&nbsp;
</div></div>
</form>
</div>
</div>

[Inny]

See Images (there are two login divs)

[i56.tinypic.com...]

[i56.tinypic.com...]

[daveVk]

There are valid reasons to embed script within HTML but not in this case, move all the css and script out of the body and into the head section, at least until things work.

rather than
<a id="displayText" href="javascript:toggle();">

use
<a id="displayText" href="#" onclick="toggle();return false">

[Inny]

Dosen't seem to work at all if I reorder it?
Can I simply/combine, toggle/show, one action rather than

1. show 2. click to show the div

can I make It simply 2 links, (one click to show link 1 login div) ? Seems monsterously complicated but I cant figure a cleaner way to hide both log ins, and have a link to show them, that works to hide them too when [x] is clicked.

[daveVk]

I would initially show just two links/buttons "classifieds" and "forum" that ask you to log on (register) if you are not already loged on.