Script not showing and hiding as expected!

JProg · Jul 11, 2004

Hi Everyone,

I have written a very small page (and accompanying script) to test the visibility altering behaviour of IE. I am trying to hide or show a <div> element, alternatively based upon a button being pressed. The code does not work as I had hoped, hence why I am posting. If anybody can provide some pointers as to how I might be able to get this code going I will be very appreciative. Thanks heaps.

Regards

Davo

<html>
<head>
<title> Experimenting with toggling element visibility </title>
<style type="text/css">
#box
{
background-color: #00ff00;
left: 50px;
height: 100px;
position: absolute;
top: 50px;
width: 100px;
}
#place_button
{
left: 100px;
position: absolute;
top: 300px;
}
</style>
<script type="text/javascript">

var visibile = true;

function toggleMenu()
{
if(visibile == false)
{
document.getElementById("box").visiblity = "show";
visibile = true;
}
else
if(visibile == true)
{
document.getElementById("box").visibility = "hidden";
visibile = false;
}
}
</script>
</head>
<body>
<div id="box">
<form>
<input id="place_button" type="button" value="Click This" onclick="toggleMenu()">
</form>
</div>
</body>
</html>

DreXor · Jul 11, 2004

DreX
aKa - Robert

13sio · Jul 12, 2004

Try to change

Code:

document.getElementById("box").visiblity = "show";

&

Code:

document.getElementById("box").visibility = "hidden";

into

Code:

document.getElementById("box").style.visibility = "visible";

&

Code:

document.getElementById("box").style.visibility = "hidden";

respectively. Also, put the button outside of the div tag. Otherwise, the button will disappear when hide the div tag.

Code:

[b]<div id="box"></div>[/b]
<form>
<input id="place_button" type="button" value="Click This" onclick="toggleMenu()">
</form>

JProg · Jul 12, 2004

13sio,

Your suggestions allowed me to get this script working, thanks heaps for your help.

Regards

Davo

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Script not showing and hiding as expected!

JProg

Programmer

DreXor

Programmer

13sio

Technical User

JProg

Programmer

Similar threads

Part and Inventory Search

Sponsor