INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Show and Hide div tags

How to show and hide using div's by GUJUm0deL
Posted: 16 Jun 05

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

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close