/ / Comment puis-je créer un accordéon facile avec jQuery? - jquery, slider, accordéon

Comment puis-je créer un accordéon facile avec jQuery? - jquery, slider, accordéon

J'ai cette structure HTML et j'en ai besoin àcliquez sur ".open_panel", le div nommé ".utenti_iscritti" devient visible et glissez-le vers le bas. Évidemment, je ne peux pas utiliser d'identifiant unique car il s'agit d'une structure qui se réplique plusieurs fois dans la page (liste récapitulative).

Merci beaucoup!

Et voici mon 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><!--intro-->

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

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

Réponses:

1 pour la réponse № 1

regardez le le plus proche()-fonction de jquery:

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

1 pour la réponse № 2

J'utiliserais le accordian dans jQuery UI

Il y a une page de démos ici aussi: http://jqueryui.com/demos/accordion/


0 pour la réponse № 3

une google rapide révèle des tonnes de contrôles accordian. Je recommanderais d'utiliser le accordéon jQuery UI c'est celui que j'utilise. il y a des tonnes de démos et d'échantillons de code, et il est agréable et pratique avec un générateur de peau en ligne.