The following code is from an opensource example on IBM's Developers site. The basic code works fine, but when I have more than one line hidden within a spinner, IE shows a large white gap when the spinner is closed. Is visibility:hidden an issue? Is it a PHP issue?

any help would be great.

<?php
function start_spinner( $id, $title )
{
?>
<div class="item-header">
<a href="javascript:spin('<?php echo( $id ); ?>')"
  id="<?php echo( $id ); ?>">open</a> <?php echo( $title ); ?>
</div>

<div class="item-body" id="<?php echo( $id ); ?>_body">
<?php
}

function end_spinner()
{
?>
</div>
<?php
}
?>
<html>
<head>
<title>Spinner Example</title>

<style type="text/css">
body { font-family: arial, verdana, sans serif; width: 800px; }
.item-header a { font-size: small; }
.item-header {
  font-weight: bold; border-bottom: 1px solid black;
  font-size: x-large;
}
.item-body {
  margin: 0px; 
  font-size: small;
  visibility: hidden; 
  height: 0px;
}
</style>

<script>
function spin( obj )
{
  var spinner = document.getElementById( obj );
  var spinner_content = document.getElementById( obj+"_body" );
  if ( spinner_content.style.visibility == 'visible' )
  {
    spinner.innerHTML = 'open';
    spinner_content.style.visibility = 'hidden';
    spinner_content.style.height = '0px';
    spinner_content.style.margin = '0px';
  }
  else
  {
    spinner.innerHTML = 'close';
    spinner_content.style.visibility = 'visible';
    spinner_content.style.height = 'auto';
    spinner_content.style.margin = '20px 0px 20px 50px';
  }
}
</script>

</head>
<body>

<?php start_spinner( 'lev1', "Level One" ); ?>
<p>This is the content of level one.</p>
<p>This is the content of level two.</p>
<p>This is the content of level three.</p>
<p>This is the content of level four.</p>
<?php end_spinner( ); ?>

<?php start_spinner( 'lev2', "Level Two" ); ?>
This is the content of level two.
<?php end_spinner( ); ?>

</body>
</html>
    14 days later

    I made a little modification of the script:

    <?php 
.........
.item-body { 
  margin: 0px; 
  font-size: small; 
  display: none;  // this line
  height: 0px; 
} 
</style> 

<script> 
function spin( obj ) 
{ 
  var spinner = document.getElementById( obj ); 
  var spinner_content = document.getElementById( obj+"_body" ); 
  if ( spinner_content.style.display == 'block' )   // this line
  { 
    spinner.innerHTML = 'open'; 
    spinner_content.style.display = 'none';   // this line
    spinner_content.style.height = '0px'; 
    spinner_content.style.margin = '0px'; 
  } 
  else 
  { 
    spinner.innerHTML = 'close'; 
    spinner_content.style.display = 'block';   // this line
    spinner_content.style.height = 'auto'; 
    spinner_content.style.margin = '20px 0px 20px 50px'; 
  } 
} 
</script> 
.............
      Write a Reply...