Simple "show / hide" script using radio buttons, need a little help

Question

Hello;
I have a place in my form where I need to swap out what type of form you need to fill out in an area. If I don't do this, it makes the page look over crowded and if I pass it off to a 2 or 3 step process, it doesn't have enough info in each section to be worth it. It's either one or the other.
Right now, this code works nice. click on a radio button, and the form section appears and disappears. What I am trying to make this do it when the page loads, one of the radio buttons is selected and one of the form sections is visible. Then if you click on the other radio button, it swaps them.
can anyone help me tweek this code so one of the buttons is selected all the time?
here is my script.
<style type="text/css">
.showHide {
position: absolute;
background-color: #f1f1f1;
width: 350px;
padding: 1px;
color: black;
border: #999999 2px dashed;
display: none;
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
</script>
<form>
<input name=type type=radio onclick="setVisibility('sub3', 'inline');setVisibility('sub4','none');" value='male' checked>Selection 1
<input type=radio name=type value='female' onclick="setVisibility('sub3', 'none');setVisibility('sub4','inline');";>Selection 2
<div id="sub3" class="showHide">Selection 1 content</div>
<div id="sub4" class="showHide">Selection 2 content</div>
</form>
That's the short of it with out dumping tons of other code on anyone.
Thank you

Answer 1

That's what I need. I tweeked it a little and now it doesn't work. Can
you help me add one last option? I need 3 buttons that intereact leaving the red one still visible when it loads unless you click on
one of the others. this is what I'm trying to do:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#divGrey').hide();
$('#divRed').show();
$('#divBlue').hide();
$('.grey').click(function(){
//$(this).hide();
$('#divGrey').show();
$('#divRed').hide();
$('#divBlue').hide();
$('.red').click(function(){
//$(this).hide();
$('#divGrey').hide();
$('#divRed').show();
$('#divBlue').hide();
$('.blue').click(function(){
//$(this).hide();
$('#divGrey').hide();
$('#divRed').hide();
$('#divBlue').show();
</script>
<style type="text/css">
#divGrey {
position: absolute;
background-color: #f1f1f1;
width: 350px;
padding: 1px;
color: black;
border: #999999 2px dashed;
display: none;
#divRed {
position: absolute;
background-color: #f1f1f1;
width: 350px;
padding: 1px;
color: black;
border: #999999 2px dashed;
display: none;
#divBlue {
position: absolute;
background-color: #f1f1f1;
width: 350px;
padding: 1px;
color: black;
border: #999999 2px dashed;
display: none;
</style>
<input type="radio" name="Radio1"  value="" id="RadioGroup1_1" checked="checked"  />Selection 1
<input type="radio" name="Radio1"  value="checked" id="RadioGroup1_0" />Selection 2
<input type="radio" name="Radio1"  value="checked" id="RadioGroup1_2" />Selection 3
<div id="divRed">Selection 1 content</div>
<div id="divGrey">Selection 2 content</div>
<div id="divBlue">Selection 3 content</div>
it isn't doing anything right now, and no errors either that I can see. Any ideas?