Share this page 

Hide a DIVTag(s): Language


Thanks to E. Blackwood for the IE6 bugfix. 
<script>

var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
   browserType= "gecko"
}

function hide() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip")');
  else
     document.poppedLayer =
        eval('document.layers["realtooltip"]');
  document.poppedLayer.style.visibility = "hidden";
}

function show() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip")');
  else
     document.poppedLayer =
         eval('document.layers["realtooltip"]');
  document.poppedLayer.style.visibility = "visible";
}

</script>

<form>
<input type=button onClick="hide()" value="hide">
<input type=button onClick="show()" value="show">

</form>
<div id="realtooltip"  style="visibility: visible">
<big>Real's HowTo</big>
<layer></layer></div>
Try it :

Real's HowTo

 

The above HowTo uses visibility = "visible"/"hidden" which keeps the element in the layout but does not show the content. To actually remove the element, you use display = "none"/"inline" to force a realignment of the page layout. 

<script>
var browserType;

if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
 browserType= "gecko"
}

function hide2() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip2")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip2")');
  else
     document.poppedLayer =
        eval('document.layers["realtooltip2"]');
  document.poppedLayer.style.display = "none";
}

function show2() {
  if (browserType == "gecko" )
     document.poppedLayer =
         eval('document.getElementById("realtooltip2")');
  else if (browserType == "ie")
     document.poppedLayer =
        eval('document.getElementById("realtooltip2")');
  else
     document.poppedLayer =
         eval('document.layers["realtooltip2"]');
  document.poppedLayer.style.display = "inline";
}

</script>


<form>
<input type=button onClick="hide2()" value="hide">
<input type=button onClick="show2()" value="show">
</form>
<div id="realtooltip2" style="display: inline">
<big>Real's HowTo</big>
<layer></layer></div>
Try it :

Real's HowTo
See also this HowTo and this one.
mail_outline
Send comment, question or suggestion to howto@rgagnon.com