Menu
So I’ve got this script that shows/hides a div layer when you click on open or close. Now, it works perfect in Mozilla…BUT in IE, it shows the space where the hidden layer is? If that makes sense. Check out this page in Mozilla, and then in Internet Explorer.
[url]http://www.heartslie.com/fun/view2.html
Here is my code:
[code=html]<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>
<div class=”item-header”>
<a href=”javascript:spin(‘lev1’)”
id=”lev1″>open</a> Level One</div>
<div class=”item-body” id=”lev1_body”>
This is the content of level one.
</div>
<div class=”item-header”>
<a href=”javascript:spin(‘lev2’)”
id=”lev2″>open</a> Level Two</div>
<div class=”item-body” id=”lev2_body”>
This is the content of level two.
</div>
</body>
</html>
thank you in advance!