Qu'est-ce qui ne va pas avec cette fonction jQuery slideToggle ?

Question

J'ai un programme de gestion de tickets auquel j'essaie d'ajouter une fonctionnalité de style "accordian" en utilisant jQuery. Ce programme est écrit en PHP. La sortie HTML ressemble à ceci :

<div class="eachticketwrapper">
     <div class="simpleticketview">
           <ul class="displayinline ticketsummarybar">
                    <li class="col0"><a href="#" class="toggleLink">E</a></li>
                       //...
           </ul>
      </div> <!-- simpleticketview -->
<br class="clear" />
<div class="toggle"> <!-- hiddenticketview -->
     //...
</div>

Cela se répète des dizaines de fois sur une page.

Mon code jQuery ressemble à ceci :

$(document).ready(function() {
   $('div.toggle').hide();
   $('.toggleLink').click(function() {
        $(this).next('div.toggle').slideToggle('fast');
   return false;
   });
});

Lorsque je clique sur le E, il ne fait pas glisser le div suivant. En fait, rien ne se passe.

J'ai essayé d'utiliser : $('div.toggle').slideToggle('slow') ;

Et cela fait basculer tous les divs. Mais j'ai besoin qu'il cible la div NEXT.

Merci d'avance.

Answer 1

Vous devez donner à votre div 'toggle' un id unique et le faire correspondre avec l'id de votre lien. puis ciblez ces ids :

<div class="eachticketwrapper">     
    <div class="simpleticketview">           
        <ul class="displayinline ticketsummarybar">
                <li class="col0"><a href="#" id="link-1234" class="toggleLink">E</a></li>
                   //...           </ul>
  </div> <!-- simpleticketview -->
  <br class="clear" />
  <div id="ticket-1234" class="toggle"> <!-- hiddenticketview -->     
   //...
  </div>

jQuery :

$(document).ready(function() { 
    $('div.toggle').hide(); 
    $('.toggleLink').click(function() { 
        var id = $(this).attr("id").split("-");
        $("#ticket-" + id[1]).slideToggle('fast'); return false; 
    }); 
});

Answer 2

Vous pouvez obtenir le div sans id, mais ce sera quelque peu compliqué :

$(this).parents().find("div.eachticketwrapper").nextAll().find("div.toggle:first")

Cela dépend de la structure de votre document. Vous devrez peut-être l'adapter, si vous avez plus d'un élément eachticketwrapper. Il est préférable d'utiliser un id.