69 lines
2.6 KiB
HTML
69 lines
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Block Collapse Demo</title>
|
|
<script>
|
|
function toggleBlock( pBlockName )
|
|
{
|
|
var theImage = document.getElementById( "I-" + pBlockName )
|
|
var theBlock = document.getElementById( "T-" + pBlockName )
|
|
|
|
if (theImage.alt == "shown")
|
|
{
|
|
theImage.src = "resources/closed.png"
|
|
theImage.alt = "hidden"
|
|
theBlock.style.visibility = "hidden"
|
|
theBlock.style.position = "absolute"
|
|
}
|
|
else
|
|
{
|
|
theImage.src = "resources/open.png"
|
|
theImage.alt = "shown"
|
|
theBlock.style.position = "static"
|
|
theBlock.style.visibility = "visible"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="document.body.offsetTop; toggleBlock('Alpha')">
|
|
<h2>Block Collapse Demo</h2>
|
|
<p>This table below has three hierarchical sections. Collapsing a section should cause those below it to move up.</p>
|
|
<p>This works on the latest Windows IE and Mozilla Firefox (Win and Mac) but not on Safari 1.2.3 (v125.9) {or 2.0 (146)}.</p>
|
|
<p>Note that the second section is collapsed when the page opens and expanding it works fine. Just the collapse is broken.</p>
|
|
|
|
|
|
<div>
|
|
<hr>
|
|
<div onclick="toggleBlock('Alpha')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Alpha"> Block One</div>
|
|
<div id="T-Alpha">
|
|
<table width="100%">
|
|
<tr><td width=30> </td><td>This is the</td></tr>
|
|
<tr><td width=30> </td><td>contents of</td></tr>
|
|
<tr><td width=30> </td><td>block one.</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div onclick="toggleBlock('Beta')" style="font-weight:bold;cursor:pointer;"><img src="resources/closed.png" alt="hidden" id="I-Beta"> Block Two</div>
|
|
|
|
<div id="T-Beta" style="visibility:hidden;position:absolute;">
|
|
<table width="100%">
|
|
<tr><td width=30> </td><td>This is the</td></tr>
|
|
<tr><td width=30> </td><td>contents of</td></tr>
|
|
<tr><td width=30> </td><td>block two.</td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div onclick="toggleBlock('Gamma')" style="font-weight:bold;cursor:pointer;"><img src="resources/open.png" alt="shown" id="I-Gamma"> Block Three</div>
|
|
|
|
<div id="T-Gamma">
|
|
<table width="100%">
|
|
<tr><td width=30> </td><td>This is the</td></tr>
|
|
<tr><td width=30> </td><td>contents of</td></tr>
|
|
<tr><td width=30> </td><td>block three.</td></tr>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|