Create a Javascript show hide contents

Create a Javascript show hide contents

//css
  <style>
   .bigbold {
    font-weight: bold;
    font-size: 25px;
   }
   .heading
   {
    background-color: #8FAFBF;
    text-align: center;
    font-weight: bold;
    height: 30px;
   }
  </style>

//javascript  
     <script>
  function showhideit(id,hid)
  {
   curstatus = document.getElementById(id).style.display;
   if(curstatus == "none")
   {
    document.getElementById(id).style.display = 'inline';
    document.getElementById(hid + '1').innerHTML = ' -';
    document.getElementById(hid + '2').innerHTML = '- ';
   }
   else
   {
    document.getElementById(id).style.display = 'none';
    document.getElementById(hid + '1').innerHTML = ' +';
    document.getElementById(hid + '2').innerHTML = '+ ';
   }
  }
</script>

//HTML
<table align="center" cellpadding="0" cellspacing="0" border="1">
<tr class="heading" style="cursor: pointer;" onclick="showhideit('information','info')">
  <td width="100" align="left" class="bigbold" id="info1"> +</td>
   <td align="center"><b>CLICK TO SHOW INFORMATION</b></td>
   <td width="100" align="right" class="bigbold" id="info2">+ </td>
</tr>
<tr>
   <td colspan="3" width="100">
   <div style="display:none;" id="information">
    PHP Loops
    Often when you write code, you want the same block of code to run over and over again in a row. Instead of adding several almost equal lines in a script we can use loops to perform a task like this.
    In PHP, we have the following looping statements:
    while - loops through a block of code while a specified condition is true
    do...while - loops through a block of code once, and then repeats the loop as long as a specified condition is true
    for - loops through a block of code a specified number of times
    foreach - loops through a block of code for each element in an array
   </div>
  </td>
</tr>
</table>

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/Show_hide.html