jQuery - display div fro

jQuery - display div fro

I am creating a members' profile page. The members' names are links to
their bio's id. The desired outcome is that when each person's name is
clicked, their bio details appear in a specific css-styled box on the
page. The box's background and border are visible when the page loads, but
no content. When another name is clicked, the previous bio returns to hide
and the current one changes to show. There is probably a simple answer to
this that this newbie just doesn't get.
<script type="text/javascript">
$(document).ready(function() {
$(document).ready(function() {
$("#bioLinks div a").click(function(){
$("#bios .show").removeClass("show").addClass("hide");
var bio = $("#bios ." + $(this).attr("id"));
bio.removeClass("hide");
bio.addClass("show");
})
});
</script>
The css for the styled portions of the links and box:
#bios {background:#FFFFCC; border-style:solid; border-color:#ffd119;
padding:15px; width:600px;text-align:left;position:absolute;
top:450px;left:180px;}
.show {display:block; width:600px;}
.hide {display:none;}
.biopic {float:left; margin-right:15px; width:200px; height:200px;
border-style:solid; border-color:#000099;clear:left;}
.biostext {display:inline; margin-left:15px; font-family:Georgia, serif;
clear:right;}
#bioLinks {float:left; display:block; font-family:Georgia, serif;
margin-left:25px; margin-top:15px;clear:right;}
a {font-family:Georgia,serif; color:#0000ff; text-decoration:none;}
The links themselves, although in reality there will be dozens:
<div id="bioLinks">
<div><a href id="bio1">Joe Bloggs</a></div>
<div><a href id="bio2">Monica Faux</a></div>
<div><a href id="bio3">John Doe</a></div>
</div>
And the bios themselves, but with the photos expunged for privacy:
<div id="bios">
<div class="bio1 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg"
width="200" height="200" alt="Joe Bloggs"--!>
<!--/div--!>
<div class="biostext">Joe Bloggs is just like everybody else.
</div>
</div>
<div class="bio2 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg"
width="200" height="200" alt="Monica Faux"--!>
<!--/div--!>
<div class="biostext"><p>Monica Faux is a belle with a shady
past.</div>
</div>
<div class="bio3 hide">
<!--div class="biopic"><img src="http://www. -- snip--.jpg"
width="200" height="200" alt="John Doe"--!>
<!--/div--!>
<div class="biostext"><p>John Doe is an unknown in the
organisation.
</div>
</div>
</div>
When I test my code in Chrome and IE, the empty box displays on load, but
clicking the links produces nothing.