John Doe
John Doe

Reputation: 39

How do i make "display:none;" apply to containing elements of div awell

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

Answers (2)

Šime Vidas
Šime Vidas

Reputation: 185913

Browsers parse this code

<table>
    <div>
        <tr>
            <td>TABLE CELL</td>
        </tr>
    </div>
</table>

into this structure

screen shot

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

guypursey
guypursey

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

Related Questions