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 Code:
<?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>
Linear Mode
