asked on

Show/Hide Div

I would like to hide the div onload and show the div only if the user selects 'other' from the Country select list. Would someone please demonstrate how this is done in a function? I'm trying to modify a similar function I use with radio buttons, but this is not working.

Many thanks,
MJ

<tr>
      <th id="row7" scope="row">Country</th>
      <td headers="row7" class="midSize">
            <select id="country" name="country" size="1" title="Select country" onChange="toggle('showhide','none')">
                  <option value="CA" >Canaries</option>
                  <option value="CY" >Cyprus</option>
                  <option value="FR" >France</option>
                  <option value="IN" >India</option>
                  <option value="PT" >Portugal</option>
                  <option value="ES" >Spain</option>
                  <option value="TR" >Turkey</option>
                  <option value="GB" selected="selected">United Kingdom</option>
                  <option value="US" >United States</option>
                  <option value="other">Other</option>
            </select>
      </td>
</tr>
<div id="showhide">
<tr>
      <th id="row8" scope="row">New Country</th>
      <td headers="row8" class="midSize"><input type="text" name="newcountry" id="newcountry" size="30" maxlength="20" title="New Country" /></td>
</tr>
</div>

ASKER CERTIFIED SOLUTION

prohacx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alambres

it will work
document.getElementById('showhide').style.display = '';

but the "correct" (more accurate) syntax is
document.getElementById('showhide').style.display = 'block';

anyway it will work good on IE, but I am not sure if Mozilla will support the style.display in a <tr>
to get it work in all browsers the div or span where style.display is applied should enclose a <table>

other way is using inline instead of block if you have the span or div inside a <td>

archrajan

for firefox and IE and netscape just do this
document.getElementById('showhide').style.display = ""; // for block
document.getElementById('showhide').style.display = "none" //for none

prohacx

Yep I tested my code and it works in IE6, NN7.1 and Opera 7.23

mjacobs2929

ASKER

Thanks prohacx,

That work great. And you're right - I didn't need the div at all.

Cheers
MJ