PDA

View Full Version : Show/Hide with Layers

chelvis
03-11-2003, 05:20 PM
I wrote the following code and doesnt work in NN6 and NN4.X. How can I change this to make it work in NN? I think I have to have to if else one for IE and another one for NN?

<html>
<head>
<title>Untitled</title>
<SCRIPT Language="Javascript">
<!-- Expand contract section
var sDisplay = "none";
function ExpandSection(idVariable){

if (idVariable.style.display=="none")
{
idVariable.style.display="" ;
}
else{
idVariable.style.display="none" ;
}
}

function ExpandShortBody(idVariable){

if (idVariable.style.display=="none")
{
idVariable.style.display="" ;
}
else{
idVariable.style.display="none" ;
}
}
// End of Expand Contract Section -->
</SCRIPT>
</head>

<body>

<table border="0" width="100%">
<tr><td valign="top" width="3"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right"><a CLASS="MedBlackText">E-mail: &nbsp; &nbsp; </a></td><td valign="top"><input type="text" name="cfname" size="28"></td><td valign="top" width="10"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right"><a CLASS="MedBlackText">Contact notes: &nbsp; &nbsp; </a></td><td valign="top" valign="top"><a CLASS="MedBlackText"><textarea name="notes" cols="20" rows="2"></textarea></a></td></tr>

<tr><td valign="top" colspan="6" align="middle">
<table border="0" cellspacing="0" cellpadding="0" id=shortbody style="" width="95%" bgcolor="#DEDEAE">
<tr><td valign="top" width="3"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right"><a CLASS="MedBlackText">Username: &nbsp; &nbsp; </a></td><td valign="top"><input type="text" name="cfname" size="24"></td><td valign="top" width="10"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right"><a CLASS="MedBlackText">Password: &nbsp; &nbsp; </a></td><td valign="top" valign="top"><input type="text" name="lname" size="24"></td></tr>
<tr><td valign="top" colspan="3" height="8"><img src="images/spacer.gif" border="0" height="8"></td></tr>
<tr><td valign="top" colspan="5"><img src="images/spacer.gif" border="0"></td><td valign="top"><a href="#" onclick="ExpandSection(longbody);ExpandShortBody(shortbody);">Expand Me</a></td></tr>
<tr><td valign="top" colspan="3" height="5"><img src="images/spacer.gif" border="0" height="5"></td></tr>
</td></tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="95%" id=longbody style="DISPLAY: none">
<tr><td valign="top" width="3" bgcolor="#DEDEAE"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right" bgcolor="#DEDEAE"><a CLASS="MedBlackText">Username: &nbsp; &nbsp; </a></td><td valign="top" bgcolor="#DEDEAE"><input type="text" name="cfname" size="24"></td><td valign="top" width="10" bgcolor="#DEDEAE"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right" bgcolor="#DEDEAE"><a CLASS="MedBlackText">Password: &nbsp; &nbsp; </a></td><td valign="top" valign="top" bgcolor="#DEDEAE"><input type="text" name="lname" size="24"></td></tr>
<tr><td valign="top" colspan="6" height="10" bgcolor="#DEDEAE"><img src="images/spacer.gif" border="0" height="10"></td></tr>

<tr><td valign="top" colspan="6" height="4" bgcolor="#CCCC8C"><img src="images/spacer.gif" border="0" height="4"></td></tr>
<tr><td valign="top" width="3" bgcolor="#CCCC8C"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right" bgcolor="#CCCC8C"><a CLASS="MedBlackText">Username: &nbsp; &nbsp; </a></td><td valign="top" bgcolor="#CCCC8C"><input type="text" name="cfname" size="24"></td><td valign="top" width="10" bgcolor="#CCCC8C"><img src="images/spacer.gif" border="0" width="3"></td><td valign="middle" align="right" bgcolor="#CCCC8C"><a CLASS="MedBlackText">Password: &nbsp; &nbsp; </a></td><td valign="top" valign="top" bgcolor="#CCCC8C"><input type="text" name="lname" size="24"></td></tr>
<tr><td valign="top" colspan="6" height="5" bgcolor="#CCCC8C"><img src="images/spacer.gif" border="0" height="5"></td></tr>
<tr><td valign="top" colspan="5" bgcolor="#CCCC8C"><img src="images/spacer.gif" border="0"></td><td valign="top" bgcolor="#CCCC8C"><a href="#" onclick="ExpandSection(longbody);ExpandShortBody(shortbody);">Contract ME</a></td></tr>
</td></tr>
</table>
</body>
</html>
Roy Sinclair
03-11-2003, 06:18 PM
NN4 won't do this without a serious lot of work which will also involve a lot of changes to the html code as well, making this work with NN6 is simple though.


<SCRIPT Language="Javascript">
<!-- Expand contract section
var sDisplay = "none";
function ExpandSection(idVariable){
var localId = document.getElementById(idVariable);
if (localId.style.display=="none")
{
localId.style.display="" ;
}
else{
localId.style.display="none" ;
}
}

// End of Expand Contract Section -->
</SCRIPT>



Replace calls to ExpandShortBody() with calls to ExpandSection() since they are the same code there's no reason to have or use both of them. Also make sure that the ID being passed to ExpandSection is a string (ie. change ExpandSection(longbody) to ExpandSection('longbody').