javascript - jQuery - div を表示する

Question

メンバーのプロフィールページを作成しています。メンバーの名前は、プロフィールの ID へのリンクです。望ましい結果は、各人の名前がクリックされたときに、ページ上の特定の css スタイルのボックスにプロフィールの詳細が表示されることです。ページの読み込み時にボックスの背景と境界線が表示されますが、コンテンツは表示されません。別の名前をクリックすると、以前の略歴が非表示に戻り、現在の略歴が表示に変わります。おそらく、この初心者が得られない簡単な答えがあるでしょう。

    <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>

リンクとボックスのスタイル部分の css:

#bios {background:#FFFFCC; border-style:solid; border-color:#ffd119; padding:15px; width:600px;text-align:left;position:absolute; top:200px;left:20px;}
.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;}

リンク自体ですが、実際には数十あります。

<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>

そして、BIOS自体ですが、プライバシーのために写真は削除されています:

<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">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">John Doe is an unknown in the organisation.
            </div>
         </div>
</div>

Chrome と IE でコードをテストすると、読み込み時に空のボックスが表示されますが、リンクをクリックしても何も表示されません。