Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • 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!

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

Donate Today!

Do you enjoy these
technical forums?
Donate Today! Click Here

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Show and Hide div tags

How to show and hide using div's
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

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