Vários painéis deslizantes de jQuery na mesma página

Question

Temos uma página do ASP.NET que é a programação adicionando dados como novos itens de lista em uma lista não ordenada.

Quero usar algum jQuery para mostrar um painel deslizante de detalhes extras para cada item da lista, mas o código que estou usando apenas mostra o primeiro da série (como estou supondo porque eles são chamados de mesma coisa) .. como fazer Eu adiciono algumas condições para escolher o correto?

Aqui está o código:

 
$(document).ready(function(){

    $(".btn-slide").click(function(){
        $(this).slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });

});
 

 
#panel {
    background: #754c24;
    height: 200px;
    display: none;
}
.slide {
    margin: 0;
    padding: 0;
    border-top: solid 4px #422410;
    background: #000 no-repeat center top;
}
.btn-slide {
    background: url(images/white-arrow.gif) no-repeat right -50px;
    text-align: center;
    width: 144px;
    height: 31px;
    padding: 10px 10px 0 0;
    margin: 0 auto;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}

    <% foreach( var registration in ViewModel ) { %>
            <li>
             Event: <%= registration.Event.Name %>
             Date: <%= registration.Event.Date.ToLongDateString() %>
             <div id="panel">
              <% if ( registration.HasResult )  { %>
                 Your result for this event:
                 Place: <%= registration.Result.Place %>
                 Time: <%= registration.Result.Time %>
                 Average Pace: <%= registration.Result.AveragePace %>
              <% } else { %>
                 No results have been posted for this event.

              <% } %>
              </div>                  
              <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
            </li>            
    <% } %>
</ul>

Answer 1

Altere a div para usar a classe de painel em vez de ID.

 <div class="panel">

Em seguida, alterne o slide assim:

 $('.panel', $(this).parent().parent()).slideToggle("slow");

Isso receberá a div com o painel de classe que existe nos pais dos pais da âncora.

Answer 2

Você pode fazer isso com o método ...

$(document).ready(function(){
    $(".btn-slide").each(
        function(){ $(this).click(function(){
         $(this).slideToggle("slow");
         $(this).toggleClass("active"); return false;
        });
    );
});

Answer 3

Os IDs dos elementos HTML devem ser únicos, para que seu loop esteja produzindo HTML inválido. Tente atribuir uma classe em vez de um ID para sua div.

.panel {
    background: #754c24;
    height: 200px;
    display: none;
}

<% foreach( var registration in ViewModel ) { %>

    <li>
     Event: <%= registration.Event.Name %>
     Date: <%= registration.Event.Date.ToLongDateString() %>
     <div class="panel">
      <% if ( registration.HasResult )  { %>
         Your result for this event:
         Place: <%= registration.Result.Place %>
         Time: <%= registration.Result.Time %>
         Average Pace: <%= registration.Result.AveragePace %>
      <% } else { %>
         No results have been posted for this event.
      <% } %>
      </div>
      <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
     </li>
<% } %>

Atualizada: Além disso, seu JavaScript não parece certo:

$(document).ready(function(){

    $(".btn-slide").click(function(){
        $(this).closest('li').find('.panel').slideToggle("slow");
        $(this).toggleClass("active");
         return false;
    });

});