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>
mjacobs2929Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

prohacxCommented:
Hi there!

You do not really need this div to show or hide the contents of the TR.

Simply hide the TR when needed:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Show/Hide TR </TITLE>

<script type="text/javascript">

      function toggleCountryInput() {

            if ( document.getElementById("country").options[document.getElementById("country").options.selectedIndex].value == "other" ) {
                  document.getElementById('showhide').style.display = '';
            } else {
                  document.getElementById('showhide').style.display = "none";
            }

      }

</script>

</HEAD>

<BODY onload="document.getElementById('showhide').style.display = 'none';">

<form>

<table>
<tr>
     <th id="row7" scope="row">Country</th>
     <td headers="row7" class="midSize">
          <select id="country" name="country" size="1" title="Select country" onchange="toggleCountryInput();">
               <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 id="showhide">
     <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> -->
</table>

</form>

</BODY>
</HTML>

If you'd use that div, you'd have to open a new table inside it, because <DIV><tr> is not really legal HTML.

Good luck!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
alambresCommented:
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>

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

0
prohacxCommented:
Yep I tested my code and it works in IE6, NN7.1 and Opera 7.23
0
mjacobs2929Author Commented:
Thanks prohacx,

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

Cheers
MJ
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.