Display DIVs problem

[Bastien]

Hi All,

I have a form with tabbed divs (could be 1 or n number of tabs) that are dynamically generated. Each tab div has a name and a number that I pass to the below function to hide/show those DIVs that the tabs belong to. The trouble I am having is that the first tab / div refuse to hide/change class when another tab is chosen.

function showme(id, offset){

  if (initDiv != id){ initId = id + '0';}

  if(document.getElementById('data'+initId).style.visible == 'inline'){
    document.getElementById('data'+initId).style.display = 'none';
  }
  if(document.getElementById('tabtab'+initId)){
    document.getElementById('tabtab'+initId).className = "UnSelectedTab";
  }

  document.getElementById('data'+id+offset).style.display = 'inline';
  document.getElementById('tabtab'+id+offset).className = "SelectedTab";
  initId = id+offset;
  initDiv = id;
}

The html looks like this

<tr><td width='100%' valign='top' align='left' colspan='2'>
  <div id='tabtablocation0' class='SelectedTab' style='position:relative;float:left;width:100px;'>
    <a onclick="showme('location','0')";>location 0</a>
  </div>
  <div id='tabtablocation1' class='UnSelectedTab' style='position:relative;float:left;width:100px;'>
    <a onclick="showme('location','1')";>Add new</a>
  </div>
</td></tr>    
<tr><td valign='top' align='left' style='border:1px solid black;>
  <div id='datalocation0' width='100%' style='display:inline;position:relative;' >
      <table>
        <tr><td>  
          <table width='50%' >
          <tr>        <td class='Label' nowrap>State</td>        <td><INPUT TYPE='textbox'  NAME='LOCATION.STATE1' ID='LOCATION.STATE1' SIZE='20' VALUE='64'   onkeyup='set_size(this, 20, 30);'></td>    </tr>
          <tr>        <td class='Label' nowrap>Country</td>      <td><INPUT TYPE='textbox'  NAME='LOCATION.COUNTRY1' ID='LOCATION.COUNTRY1' SIZE='20' VALUE='64'   onkeyup='set_size(this, 20, 30);'></td>    </tr>
          </table>
        </td></tr>
      </table>
    </div>
<p>
    <div id='datalocation1' width='100%' style='display:none;position:relative;' >
     <table>
       <tr><td>  
         <table width='50%' >    
         <tr>        <td class='Label' nowrap width='125px'>State</td>        <td class='input'><INPUT TYPE='textbox'  NAME='LOCATION.STATE2' ID='LOCATION.STATE2' SIZE='20' VALUE=''   onkeyup='set_size(this, 20, 30);'></td>    </tr>    
         <tr>        <td class='Label' nowrap width='125px'>Country</td>      <td class='input'><INPUT TYPE='textbox'  NAME='LOCATION.COUNTRY2' ID='LOCATION.COUNTRY2' SIZE='20' VALUE=''   onkeyup='set_size(this, 20, 30);'></td>    </tr>    
         </table>
       </td></tr>
     </table>
    </div>
</td></tr>

I keep getting an 'Object not found error' and am a little stumped. Would appreciate the help.


Bastien

I wish my computer would do what I want it to do,
instead of what I tell it to do...

 

[Clueful]

if(document.getElementById('data'+initId).style.visible == 'inline')

There is no 'visible' property, presumably you mean 'display'.

 

[Bastien]

Damn, that was stupid...thanks for the second set of eyes

Bastien

I wish my computer would do what I want it to do,
instead of what I tell it to do...