Multiple Jquery sliding panels on same page

Question

We have an asp.NET page which is programmaticaly adding data as new list items in an unordered list..

I want to use some jquery to show a sliding panel of extra detail for each list item but the code I'm using only shows the first in the series (as I'm guessing because they are called the same thing) .. How do I add some conditions to choose the correct one?

Here is the code:

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

Change the div to use class of panel instead of id.

 <div class="panel">

Then toggle the slide like this:

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

This will get the div with class panel that exists in the parent of the anchor's parent.

Answer 2

You can do that with the each method...

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

Answer 3

IDs of HTML elements must be unique so your loop is producing invalid HTML. Try assigning a class instead of an ID to your 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>
<% } %>

Updated: Also your javascript doesn't look right:

$(document).ready(function(){

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

});