How can I make an easy accordion using jQuery?

I have this HTML structure and I need that at click on ".open_panel" the div named ".utenti_iscritti" become visible and slide down. Obviously I can't use unique id because this is a structure that replicate many times in the page (this is a list o lessons).

Thank you so much!

And this is my code:

    <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&开发者_JAVA百科gt;<!--intro-->

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

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

---

have a look at the closest()-function of jquery:

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

---

I'd use the accordian in jQuery UI

There's a page of demos here too: http://jqueryui.com/demos/accordion/

---

a quick google reveals tons of accordian controls. I would recommend using the jQuery UI accordion that is the one that I use. there are tons of demos and sample code, and it is nice and skin-able with an online skin generator.