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