<div style display = "none"> inside the table does not work

Question

I am trying to switch the display of a div element that has a label and text field using javascript. Here is a snippet of code

<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, when the page loads, the div element is still displayed; the display display for the table element is working fine. I do not understand why this does not work, maybe the style of the table element overrides the style of the div element. Postscript I can still hide the elements inside the div, but not the div itself.

Answer 1

just change the <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> 

Answer 2

Semantically, what you are trying to make invalid is html, the table element cannot have a div element as a direct child element. What you can do is get your div element inside the td element and then try to hide it