Hide/Show Elements

[sstangle73]

Hi, onClick on a select element, I am trying to hide or show two different table rows. It does not seem to be working on internet explorer

 

Thanks for any help!

 

	function showMe (a, box) { 
  document.getElementById(a).style.display = "table-row";
  document.getElementById(a+"2").style.display = "table-row";
}
function hideMe (a, box) { 
  document.getElementById(a).style.display = "none";
  document.getElementById(a+"2").style.display = "none";
} 	

<tr><td><b>Account Type:</b><br><small>(If you are both a club and college coach, please select college coach)</small>:</td><td><SELECT NAME="type" size="3"><OPTION VALUE="coach" onClick="hideMe('hide', this)" >Coach/Manager</OPTION><OPTION VALUE="college_coach" onClick="showMe('hide', this)">College Coach</OPTION>
							</SELECT></div>
							</td></tr>
							<tr id="hide" style="display:none;"><td><b>College:</b></td><td colspan="2"><input type="text" name="college" value=""></td></tr>
							<tr id="hide2" style="display:none;"><td><b>Title:</b></td>
							<td><select name="gender" size="1">
						<option VALUE="men" >Men's</option><option VALUE="women" >Women's</option><option VALUE="both" >Men's and Women's</option>
							</select></div>
						</td>
						<td><select name="title" size="1"><OPTION VALUE="head" >Head Coach</OPTION><OPTION VALUE="assistant" >Assistant Coach</OPTION>
							</select></div>
						</td></tr>

here is the live demo if you would like to see it:

http://new.maddogmania.com/application/register.php

[UrbanDweller]

Just going to throw it out there but maybe it doesn't support style.display table_row etc?

have you tried display block none etc or you could ad classes to affected rows with a hidden and displayed class that u could change etc?

[zeodragonzord]

Try creating two CSS styles, one for showing the element, one for hiding.  Use JavaScript to switch the styles.

 

CSS:

 

.show {
    visibility: visible;
}

.hide {
    visibility: hidden;
}

 

 

JavaScript to set class names for showing/hiding:

 

document.getElementById(a).className="show";
document.getElementById(a).className="hide";