jquery - jqueryで写真、サムネイル、説明を表示する方法

Question

創作ページを作りたいです。動作は単純です: プロジェクトのタイトルをクリックすると、大きな画像 (下のコードでは imgdefault)、縮小画像 (ミニチュア)、および説明 (説明) が同時に表示されます。

PHPによって生成されたコード

<ul id="imgdefault">
  <li><img src="GdeImg0.jpg" /><img src="GdeImg1.jpg" /></li>
  <li><img src="GdeImg2.jpg" /><img src="GdeImg3.jpg" /></li>
</ul>
<ul id="miniatures">
    <li><img src="miniaturesImg0.jpg" /><img src="miniaturesImg1.jpg" /></li>
    <li><img src="miniaturesImg2.jpg" /><img src="miniaturesImg3.jpg" /></li>       
</ul>
<ul id="description">
    <li>Description Images 0</li>
    <li>Description Images 1</li>   
</ul>

jQuery では、最初のクリック後に関数の開始が機能します。その後…迷ってます。

$(document).ready(function(){
$("#listeProjet ul li").click(function () {
     $("#imgdefaut > li:not(li:nth-child(1)) > img").css({'visibility':'hidden'});
     $("#miniatures > li:not(li:nth-child(1))").css({'visibility':'hidden'});
     $("#description > li:not(li:nth-child(1))").css({'visibility':'hidden'});              
},function(){
     $("#imgdefaut > li:not(li:nth-child("+ $(this).index().next("li") +")) > img").css({'visibility':'visible'});
     $("#miniatures > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});
     $("#description > li:not(li:nth-child("+ $(this).index().next("li") +"))").css({'visibility':'visible'});                            
});           
});

結果なし。誰でも私を助けることができますか？