Thursday, January 15, 2009

Hide or Show (DIV)

<html>
<head>

<!-- Javascript MUST within HEAD -->
<script type="text/javascript" language="JavaScript">

function ReverseContentDisplay(d) {

if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = ""; }
else { document.getElementById(d).style.display = "none"; }

}

function load(d) {
document.getElementById(d).style.display = "none";
}
</script>

</head>

<body onload="load('demodiv')" >
<form>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td class="labelHeader" width="20%">Customer Name</td>
<td width="30%" class="label" ><input type="text" value="Mr. XX" readonly disabled size=30></td>
<td class="labelHeader" width="20%">Age</td>
<td class="label" ><input type="text" value="26" readonly disabled size=30></td>
</tr>
<tr><td colspan=4 align=right>
<a onclick="javascript:ReverseContentDisplay('demodiv');">Show/Hide Details</a>
</td>
</tr>
<tr>
<td colspan=4>
<div ID="demodiv">
<table border="0" cellpadding="2" cellspacing="2" width="100%">

<tr>
<td class="labelHeader" width="20%">Status</td>
<td width="30%" class="label" ><input type="text" value="Activated" readonly disabled size=30></td>
<td class="labelHeader" width="20%">Address</td>
<td class="label" ><input type="text" value="" readonly disabled size=30></td>
</tr>

</table>
</div>
</td>
</tr>
</table>
</form>

</body>
</html>

No comments: