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
2009-11-24 19:35:42