Jquery – Multiple Jquery sliding panels on same page

asp.netjquerypanelssliding

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>

Best Answer

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.

Related Topic