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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to show and hide using div's

Show and Hide div tags

How to show and hide using div's

by  GUJUm0deL  Posted    (Edited  )
This code will show and hide a <div> tag. Works in IE and NS6+.

Code: 
<html>
<head>

<script>
//this function will show the content within the <div> tag
function toggleDiv(divName) 
{
  thisDiv = document.getElementById(divName);
  if (thisDiv) 
  {
    if (thisDiv.style.display == "none") {
      thisDiv.style.display = "block";
    }
  }
  else {
    alert("Error: Could not locate div with id: " + divName);
  }
}

//this function will hide the content within the <div> tag
function toggleDiv2(divName) 
{
  thisDiv = document.getElementById(divName);
  if (thisDiv) 
  {
    if (thisDiv.style.display == "block") {
      thisDiv.style.display = "none";
    }
  }
  else {
    alert("Error: Could not locate div with id: " + divName);
  }
}
</script>
</head>

<body>
<table>
<tr>
<td>
<!-- calls the 'toggleDiv' that shows the <div> -->
<input name="ff1" type=radio value=Y onClick="toggleDiv('showme');">Show
<!-- calls the 'toggleDiv2' that hides the <div> -->
<input name="ff1" type=radio value=N onClick="toggleDiv2('showme');">Hide
</td>
</tr>
<tr>
<td>
<!-- by defualt hide the <div> tag -->
<div id="showme" style="display: none;">
<table width="100%" border="0" cellpadding="1" cellspacing="1">
<tr>
<td><div align="right">Now you can see me, yeay!!</div></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
Some other text here
</td>
</tr>
</table>
</body>
</html>

Check out the example here:
http://www.imajinarts.com/hide_n_show.html
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top