Display hidden row in asp.net mvc grid - asp.net-mvc

Question

I have made grid with html table tag .in one of TD tag I have this code
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightbox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
These tag provide me some extra info from grid row that By default is hidden.
In other side I have Link tag that if user pressed that display that row.
but problem is that when I pressed it, it just show me the first record detail and when I press the others it show me the first row detail.
where is the problem guys ?
This is my whole ASPX view
<% foreach (var premium in Model)
{%>
<tr>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.SharingTitle %></span>
</td>
<td style=" font-weight: bold;width: 130px;">
<span ><%= premium.AddedDate.ConvertToPersianDate(true) %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.IsSubmit %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.ResturantName %></span>
</td>
<td style="width: 130px;">
<span> <%= premium.Content %></span>
</td>
<td style="width: 130px;">
<div class="group">
<a class="delete" href="<%= Url.Action("submit", "PremiumSharingAdmin", new {historyId = premium.SharingPremiumHistoryID}) %>" onclick="return confirm('آیا می‌خواهید این خبر را تایید کنید؟');">تایید</a>
</div>
</td>
<td>
<a onclick="$('#lightBox').css('display','inline')"></a>
<div style="display: none" id="lightBox">
<%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
<img src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
<div>
<textarea readonly="readonly">
<%= premium.Content %>
</textarea>
</div>
<div>
<input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
</div>
</div>
</td>
</tr>
<%} %>

Answer 1

You are generating invalid html by giving multiple <div> elements the same id attribute. $('#lightBox').css('display','inline') will return all elements with id="lightbox" but set the style of only the first.
Instead, use class names and use relative selectors. I also recommend you use Unobtrusive Javascript and css, rather tan polluting your mark up with behavior.
Html
<td>
Show
<div class="lightbox">Some content to display</div>
</td>
CSS
.lightbox {
display: none;
}
Script (at bottom of page)
<script>
$('.toggle').click(function () {
if ($(this).hasClass('hidden')) {
$(this).next('div').show();
$(this).text('Hide');
} else {
$(this).text('Show');
$(this).next('div').hide();
}
$(this).toggleClass('hidden');
});
</script>
</body>
Side note: Using RenderAction to render the contents of the hidden div suggest the contents are large and/or you calling a service/database to get the contents. If that's the case you should be loading the contents on demand using ajax (unless your expecting the users to view the details of all rows)