¿Cómo puedo hacer un acordeón fácil usando jQuery? - jquery, control deslizante, acordeón

Tengo esta estructura HTML y necesito que enhaga clic en ".open_panel" el div llamado ".utenti_iscritti" se hace visible y se desliza hacia abajo. Obviamente no puedo usar una identificación única porque esta es una estructura que se replica muchas veces en la página (esta es una lista de lecciones).

Muchas gracias!

Y este es mi código:

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

Respuestas

echar un vistazo a la más cercano ()-función de jQuery:

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

Yo uso el acordeón en jQuery UI

Hay una página de demos aquí también: http://jqueryui.com/demos/accordion/

un google rápido Revela toneladas de controles de acordeón. Yo recomendaría usar el jQuery UI acordeón Ese es el que yo uso. hay toneladas de demostraciones y código de muestra, y es agradable y con un generador de skin en línea.