Contemplating Contemplating - 10 days ago 6
CSS Question

<div style display="none" > inside a table not working

I am trying to toggle display of a div element which has a label and a textbox using javascript.
Here is the code snippet

<table id="authenticationSetting" style="display: none">
<div id="authenticationOuterIdentityBlock" style="display: none;">
<tr>

<td class="orionSummaryHeader"><orion:message key="policy.wifi.enterprise.authentication.outeridentitity"/>: </td>
<td class="orionSummaryColumn">
<orion:textbox id="authenticationOuterIdentity" size="30"/>
</td>

</tr>
</div>

</table>


However on page load the div element still displays ,the display toggling for the table element is working fine.
I am at a loss as to why this is not working,could it be that the style of the table element is overriding the style of the div element.
P.S. I am still able to hide elements inside the div but not the div itself.

Answer

simply change <div> to <tbody>

<table id="authenticationSetting" style="display: none">
  <tbody id="authenticationOuterIdentityBlock" style="display: none;">
    <tr>
      <td class="orionSummaryHeader">
        <orion:message key="policy.wifi.enterprise.authentication.outeridentitity" />:</td>
      <td class="orionSummaryColumn">
        <orion:textbox id="authenticationOuterIdentity" size="30" />
      </td>
    </tr>
  </tbody>
</table>