Manage this page
This articles explores a couple of ways of hiding div sections in an html document. The discussion will apply to other html controls as well that exhibit "display" and "visibility" properties.
Setup a div
<div id="mydiv" style="visibility:hidden">
<p>This is not going to show initiallyy
</div>
How to show it programmatically
function showdiv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
}
//div found
mydiv.style.visibility="visible";
}
How to hide the div again
function hidediv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
}
//div found
mydiv.style.visibility="hidden";
}
Possible values for the visibility tag
Read up more on this visibility tag here
Apparently invisibile elements take up space. If you don't want them to take space it is suggested that the "display" tag be used.
Sample code using the visibility tag
<html>
<head>
<script>
function hidediv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
return;
}
//div found
mydiv.style.visibility="hidden";
}
function showdiv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
return;
}
//div found
mydiv.style.visibility="visible";
}
</script>
</head>
<body>
<div style="align:center;width:50%;margin-left:25%">
<div id="div1" style="background:red;color:white">
<p>Top
</div>
<div id="mydiv" style="visibility:hidden">
<p>Transient Middle
</div>
<div id="mydiv" style="background:blue;color:white">
<p>Bottom
</div>
</div>
<h3>Show/hide Using the Visibility tag</h3>
<form>
<input type="button" value="hide" onclick="hidediv()"/>
<input type="button" value="show" onclick="showdiv()"/>
</form>
</body>
</html>
Bringing in the display tag
Read about the display property of CSS here
Example of a div that won't show up
<div id="mydiv" style="display:none">
<p>This is not going to show initiallyy
</div>
Showing the div
function showdivDisplay()
{
var mydiv = document.getElementById("mydiv");
mydiv.style.visibility="";
mydiv.style.display="";
}
Especially notice how the "display" property is unset as opposed to setting it to a specific value. This is because the possible values for the display property are numerous as you could read from the above reference. By unsetting it the hope is that it will use the default value. That seem to work. Also notice how the visibility property is unset as well.
I would have thought that the process of unsetting is to set the variable to null. Somehow that didn't work. Setting these style variables to empty strings seem to work.
Hiding the div using display
function hidedivDisplay()
{
var mydiv = document.getElementById("mydiv");
mydiv.style.visibility="";
mydiv.style.display="none";
}
Combined sample code
<html>
<head>
<script>
function hidediv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
return;
}
//div found
mydiv.style.visibility="hidden";
}
function showdiv()
{
var mydiv = document.getElementById("mydiv");
if (mydiv == null)
{
alert("Sorry can't find your div");
return;
}
//div found
mydiv.style.visibility="visible";
}
function showdivDisplay()
{
var mydiv = document.getElementById("mydiv");
mydiv.style.visibility="";
mydiv.style.display="";
}
function hidedivDisplay()
{
var mydiv = document.getElementById("mydiv");
mydiv.style.visibility="";
mydiv.style.display="none";
}
</script>
</head>
<body>
<div style="align:center;width:50%;margin-left:25%">
<div id="div1" style="background:red;color:white">
<p>Top
</div>
<div id="mydiv" style="visibility:hidden">
<p>Transient Middle
</div>
<div id="mydiv" style="background:blue;color:white">
<p>Bottom
</div>
</div>
<h3>Using Visibility</h3>
<form>
<input type="button" value="hide" onclick="hidediv()"/>
<input type="button" value="show" onclick="showdiv()"/>
</form>
<h3>Using Display</h3>
<form>
<input type="button" value="hide" onclick="hidedivDisplay()"/>
<input type="button" value="show" onclick="showdivDisplay()"/>
</form>
</body>
</html>
Satya - Wednesday, October 12, 2005 6:10:11 PM
Swapping between small and large views of an image
<script>
function show1(divname)
{
var mydiv = document.getElementById(divname);
mydiv.style.visibility="";
mydiv.style.display="";
}
function hide1(divname)
{
var mydiv = document.getElementById(divname);
mydiv.style.visibility="";
mydiv.style.display="none";
}
function showsmall()
{
hide1("large");
show1("small");
}
function showlarge()
{
hide1("small");
show1("large");
}
</script>
<!--
********************************************************
* Large image view div
********************************************************
-->
<div id="large" style="display:none">
<p><a href="javascript:showsmall()">show small image</a></p>
<p><img src="your-image-url"></a></p>
</div>
<!--
********************************************************
* Small image view div
********************************************************
-->
<div id="small" style="visibility:visible">
<p><a href="javascript:showlarge()">show large image</a></p>
<p><img width="200" src="your-image-url"></a></p>
</div>