I have a radio button set that I am trying to use the onclick method to mae one row visible or the other. Let me show you what I mean. I have this javascript defined. I tried to use pointers but then I got element has no properties. So I've reverted to useing the full DOM call.
Code:
<script type="text/javascript">
<!--
var sd = document.getElementById("sd");
var m1 = document.getElementById("md1");
var m2 = document.getElementById("md2");
function singleChange()
	{
	document.getElementById("sd").style.visibility = 'visible';
	document.getElementById("md1").style.visibility = 'hidden';
	document.getElementById("md2").style.visibility = 'hidden';
	document.getElementById("md1").style.display = 'none';
	document.getElementById("md2").style.display = 'none';
	document.getElementById("sd").style.display = 'inline';
	}
function multiChange()
	{
	document.getElementById("sd").style.visibility = 'hidden';
	document.getElementById("md1").style.visibility = 'visible';
	document.getElementById("md2").style.visibility = 'visible';
	document.getElementById("md1").style.display = 'inline';
	document.getElementById("md2").style.display = 'inline';
	document.getElementById("sd").style.display = 'none';
	}
//-->
</script>
I know that can be optimized so please give me pointers on that.

Now my HTML looks like this:
Code:
<style type="text/css">
.
.
.
#md1,#md2
     {
     display:none;
     }
#sd
     {
     visibility:visible;
     }
</style>
.
.
.
<tr>
	<td class="left">Event:</td>
	<td class="right">
            <label for="singledate">Single Date</label>
	    <input type="radio" name="datetype" id="singledate" value="0" checked onClick="singleChange();">
            <label for="multidate">Date Range</label>
	    <input type="radio" name="datetype" id="multidate" value="1" onclick="multiChange();">
	</td>
</tr>
<tr id="sd">
.
.
</tr>
<tr id="md1">
.
.
</tr>
<tr id="md2">
.
.
</tr>
Now for the gitty...

When I load the page the sd row is displayed which is fine. It is the default and it is supposed to be displayed when the first radio button is checked. This is okay screenshot

But... when I select the second radio item, sd is supposed to be replaced by the 2 rows md1 and md2. It is, but the alignment goes funky. CSS display property? If I don't use display then I get the big gap. If I use it, the alignment goes odd. How can I get the alignment right? screenshot

Finally, when I click back on Single Date, the same alignment goes haywire PLUS leaves a gap underneath. screenshot

Any tips?

Aaron