<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>