Manage this page

1. My Javascript Notes

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>