<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">&nbsp;Block One</div>
      <div id="T-Alpha">
        <table width="100%">
          <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
          <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
          <tr><td width=30>&nbsp;</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">&nbsp;Block Two</div>
      
      <div id="T-Beta" style="visibility:hidden;position:absolute;">
        <table width="100%">
          <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
          <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
          <tr><td width=30>&nbsp;</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">&nbsp;Block Three</div>
      
      <div id="T-Gamma">
        <table width="100%">
          <tr><td width=30>&nbsp;</td><td>This is the</td></tr>
          <tr><td width=30>&nbsp;</td><td>contents of</td></tr>
          <tr><td width=30>&nbsp;</td><td>block three.</td></tr>
        </table>
      </div>
      <hr>
    </div>
  </body>
</html>

