Galerie d'équipe en jquery

onjour à tous,

Je suis entrain de faire une galerie d'équipe pour un site. Je ne mets pas le CSS pour ne pas surcharger, mais il y a un bandeau en haut de page (#entete), et la galerie des photos à la suite les unes des autres sous le bandeau.
Lorsqu'on clique sur une photo, un contenu s'affiche dans le bandeau, le masque noir (.cache) se découvre de la photo cliquée et le prénom apparait sur la photo.

Voila mon code html :

<div id="entete">
    <section>
        <div class="job-descr">
            <h2>Alex</h2>
            <p>Job Alex</p>
        </div>
        <div class="specif">
            <h2>Specificite</h2>
            <p>Spe Alex</p>
        </div>
    </section>
</div>
 
<div id="equipe-photos">
 
<article class="photo">
    <img src="tigre.jpg" alt="photo" width="300" height="180"/>
    <p class="cache"></p>
    <p class="prenom">Alex</p>
    <section>
        <div class="job-descr">
            <h2>Alex</h2>
            <p>Job Alex</p>
        </div>
        <div class="specif">
            <h2>Specificite</h2>
            <p>Spe Alex</p>
        </div>
    </section>
</article>
 
<article class="photo">
    <img src="tigre.jpg" alt="photo" width="300" height="180"/>
    <p class="cache"></p>
    <p class="prenom">Marion</p>
    <section>
        <div class="job-descr">
            <h2>Marion</h2>
            <p>Job Marion</p>
        </div>
        <div class="specif">
            <h2>Specificite</h2>
            <p>Spe Marion</p>
        </div>
    </section>   
</article>
 
 
<article class="photo">
    <img src="tigre.jpg" alt="photo" width="300" height="180"/>
    <p class="cache"></p>
    <p class="prenom">Marion</p>
    <section>
        <div class="job-descr">
            <h2>fred</h2>
            <p>Job fred</p>
        </div>
        <div class="specif">
            <h2>Specificite</h2>
            <p>Spe fred</p>
        </div>
    </section>   
</article>
 
</div>

et mon Jquery :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    $('.photo section').hide();
    $('.prenom').hide();
    function Clique(){
        var Section = $(this).find('section');
        var Contenu = $(Section).html();
        $('#entete').html(Contenu);
        var Cache = $(this).find('.cache');
        $(Cache).addClass('cache-off');
        var Prenom = $(this).find('.prenom');
        $(Prenom).show();
    };
    $('.photo').click(Clique);
});
</script>

Voila mon souci :
Je voudrais que lorsqu'on clique sur une photo, les autres se recouvrent à nouveau du cache et que le prenom disparaisse, ce qui n'est pas le cas avec mon code.

Avez vous une solution pour ca, je ne trouve pas grand chose?

Un grand merci!!