jQueryを使用して簡単にアコーディオンを作成するにはどうすればよいですか？

Question

私はこのHTML構造を持っています。 ".open_panel"をクリックすると、 ".utenti_iscritti"という名前のdivが表示され、下にスライドする必要があります。明らかに、これは一意のidを使うことができません。なぜなら、これはページ内で何回も複製する構造体です（これはリストのレッスンです）。

ありがとうございました！

そして、これは私のコードです：

<script type="text/javascript"> 
     $(".open_panel").click(function() { 
       $(this).parent().parent().next("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow"); 
       //$(this).siblings().css({backgroundImage:"url(left.png)"}); 
     }); 
</script> 

<div class="lezione"> 
     <div class="intro"> 
     <h5>09:00 - 10:00</h5> 
     <h4>Walking</h4> 
     <h6>Sala Walking con Francesco</h6> 
     <div class="action libero"> 
     <span class="contatore">2</span> 
     <h6><a class="open_panel" href="#" title="Ci sono ancora posti liberi">Iscritti</a></h6> 
       </div><!--action--> 
     </div><!--intro--> 

     <div class="utenti_iscritti"> 
     </div><!--utenti_iscirtti--> 

</div><!--lezione--> 

Answer 1

はjqueryののclosest() -functionを見て：

$(".open_panel").click(function() { 
$(this).closest("div.utenti_iscritti").slideToggle(300).siblings("div.utenti_iscritti").slideUp("slow"); 
}); 

Answer 2

私はaccordian in jQuery UI

を使用したいデモのページがありますここでも：http://jqueryui.com/demos/accordion/

Answer 3

a quick googleは、数多くのアコーディオン制御を明らかにする。私が使用しているjQuery UI accordionを使用することをお勧めします。膨大なデモとサンプルコードがあり、オンラインのスキンジェネレータを使用すると素敵でスキンが可能です。