A: 

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;
    });

});
tvanfosson
Doing that moved the information that was inside the div outside for some reason, and the collapse only worked on the slide link, not the actual panel
Kevin
You need to change the CSS, too, so that the CSS selector for the panel uses the class. Also, I think your javascript need to slideToggle the previous DIV, not the button.
tvanfosson
...note that you may also need to clear your cache when your CSS is updated.
tvanfosson
let me try this out, one sec
Kevin
nope, that didn't work either .. sliding panel not moving on click...
Kevin
Sorry -- I missed the link is inside a paragraph. Will update.
tvanfosson
Also -- I'm not sure if the active class is supposed to be applied to the panel or the button. You may need to adjust this as well.
tvanfosson
A: 

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;
        });
    );
});
Ben
not working for me, clicking the link doesn't do anything after adding that
Kevin
A: 

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.

BStruthers
didn't work .. again the panel doesn't slide after adding this
Kevin
whoops, I was wrong - this worked a charm (I didn't put it in right)thanks!
Kevin
I'm not sure if I should be editing an already answered question .. but I made a change to the height of the panel class to 100% and it fits perfectly but on opening it drops down to the height of the page first (which is longer) then comes back around and fits the content of the slide.... is there a way to stop that?
Kevin