Reputation: 39
I am trying to hide some content and have it only appear when something is selected in a <select>
field.
From what I understand, I need to hide the content as a start, so I am trying to do this:
<div id="abc" style="display:none;">
<tr> <!-- Third row -->
<td>
from
</td>
<td>
<select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">
<option value="US" name="US">Some other US option</option>
<option value="US" name="US">some US option</option>
</select>
</td>
</tr>
</div>
This only hides the <div>
and not its content.
Upvotes: 0
Views: 66
Reputation: 185913
Browsers parse this code
<table>
<div>
<tr>
<td>TABLE CELL</td>
</tr>
</div>
</table>
into this structure
Notice how the DIV does not wrap your table row, but is placed before the table (as a adjacent sibling). Therefore, if you hide the DIV, the table row won't be hidden with it.
Invalid HTML enables unexpected behavior. Write valid HTML.
Upvotes: 2
Reputation: 3184
That <div>
doesn't look right there. I assume you have a <table>
tag somewhere else in your code but you haven't pasted it here.
You could try applying the style to the <tr>
tag. Children of an element should always inherit that element's style so your misplaced <div>
tag might be the problem. Try this instead:
<tr id="abc" style="display:none;"> <!-- Third row -->
<td>
from
</td>
<td>
<select name="serv" id="serv" style="width:100%; text-align:center; font-weight:bold;">
<option value="US" name="US">Some other US option</option>
<option value="US" name="US">some US option</option>
</select>
</td>
</tr>
Upvotes: 0