Jquery Animation Вторая фотография не отображается

Все отлично работает с анимацией jQuery, чтобы принять одно, когда я нажимаю на вторую фотографию, чтобы она расширялась, первая фотография появляется на оверлее вместо второй фотографии. Я отредактировал файл здесь, чтобы показать вторую фотографию.

Вот код, который у меня есть

        #expand .bio-pic2 {
        position:absolute;
        top:0;
        left:0;
    }
    #expand {
        position:absolute;
        width:1000px;
        border: 1px solid black;
        display: none;
        background-color:#ffffff;
        z-index:9999;
       height:323px;
    }
    .bio-pic2 img {
        position:absolute;
        top:0;
        left:0;
        width:323px;
    }
    .testimonial {
        position:absolute;
        top:333px;
        left:0;
        font-size:15px;
    }
    .desc {
        position:absolute;
        top:10px;
        left:333px;
    }
    .bio-pic {
        float:left;
        cursor: pointer;
        z-index:9998;
        margin:0 5px 0 0;
    }

        <div id="expand">
        <div class="test">
            <div class="bio-pic2">
                <img src="http://www.brent-ransom.com/photo-img.jpg" />
                <div class="bio-nt">
                        <h2>Name</h2>

                        <h3>Position</h3>

                </div>
            </div>
            <div class="testimonial">A testimonial!</div>
        </div>
        <div class="desc">This is a paragraph of text.</div>
    </div>

        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
        </div>
        <div id="expand">
            <div class="test">
                <div class="bio-pic2">
                    <img src="http://brent-ransom.com/photo2-img.jpg" />
                    <div class="bio-nt">
                            <h2>Name</h2>

                            <h3>Position</h3>

                    </div>
                </div>
                <div class="testimonial">A testimonial!</div>
            </div>
            <div class="desc">This is a paragraph of text.</div>
        </div>
        <div class="bio-pic">
            <img src="http://brent-ransom.com/photo2-img.jpg" />
        </div>

    $(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

Вот ссылка на jsfiddle, где я работаю над этим http://jsfiddle.net/BrentRansom/h64CZ/1/