I'm having trouble showing just a single row inside a repeater. I have all of them expanding correctly, but my efforts to show just that row have not worked out well.
<asp:Repeater ID="rptPlayers" runat="server" OnItemDataBound="DataBound_ItemDataBoundEvent">
<HeaderTemplate>
<thead>
<tr>
<th>Name</th>
<th>Profile Approved?</th>
<th>Playing in <%: DateTime.Now.Year %>?</th>
<th>Roommate</th>
<th>Manage</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tbody>
<tr>
<td><a href="#" class="show_hide"><%# Eval("FirstName") %> <%# Eval("LastName") %></a></td>
<td style="display: none"><%# Eval("PlayerEmail") %></td>
<td>
<asp:CheckBox ID="chkApproved" runat="server" Checked='<%# Eval("ProfileApproved") %>' /></td>
<td>
<asp:CheckBox ID="chkPlayingCurrentYear" runat="server" Checked='<%# Eval("PlayingCurrentYear") %>' /></td>
<td>
<asp:DropDownList ID="ddlRoommate" runat="server" AppendDataBoundItems="True"></asp:DropDownList>
<asp:LinkButton ID="lnkAssign" runat="server" OnClick="AssignPlayer"></asp:LinkButton></td>
<td>
<asp:PlaceHolder ID="AdminActions" runat="server"></asp:PlaceHolder>
<p class="text-danger">
<asp:LinkButton ID="lnkApproveProfile" runat="server" OnClick="ApprovePlayer"></asp:LinkButton>
<asp:LinkButton ID="lnkConfirm" runat="server" OnClick="ConfirmPlayer"></asp:LinkButton>
</p>
</td>
<td style="display: none">
<asp:Literal ID="ltUserId" runat="server" Text='<%# Eval("PlayerId") %>'></asp:Literal></td>
</tr>
<tr>
<td colspan="6">
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
</div>
</td>
</tr>
</tbody>
</ItemTemplate>
</asp:Repeater>
This is my current jQuery, what am I missing to just toggle a single row?
<script type="text/javascript">
$(document).ready(function () {
$("div.slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
// $(this).next('div.slidingDiv').eq(0).slideToggle(800);
});
});
</script>
If I need to take a best guess at what you want to do:
To make the jQuery toggle only the slidingDiv next to the row getting clicked:
$(document).ready(function () {
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function () {
var x = $(this).closest('tr').next();
x.find('.slidingDiv').slideToggle();
});
});
This will not work for the link "hide" inside the content row. I suggest you use another class for that, lets call it hideThis, and do another script for that:
$('.hideThis').click(function () {
$(this).closest('div').slideToggle();
});
Examples below:
$('.slidingDiv').hide();
$('.show_hide').show();
$('.show_hide').click(function () {
var x = $(this).closest('tr').next();
x.find('.slidingDiv').slideToggle();
});
$('.hideThis').click(function () {
$(this).closest('div').slideToggle();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><a href="#" class="show_hide">show hide</a>
</td>
<td style="display: none">dfhdhdh</td>
<td>fgjfgj</td>
<td>fgjhfj</td>
<td>fgjfjfj</td>
<td>fgjfjfjgfjfj</td>
<td style="display: none">fgjfjgjfgjfjgf</td>
</tr>
<tr>
<td colspan="6">
<div class="slidingDiv">Fill this space with really interesting content. <a href="#" class="hideThis">hide</a>
</div>
</td>
</tr>
<tr>
<td><a href="#" class="show_hide">show hide</a>
</td>
<td style="display: none">dfhdhdh</td>
<td>fgjfgj</td>
<td>fgjhfj</td>
<td>fgjfjfj</td>
<td>fgjfjfjgfjfj</td>
<td style="display: none">fgjfjgjfgjfjgf</td>
</tr>
<tr>
<td colspan="6">
<div class="slidingDiv">Fill this space with really interesting content. <a href="#" class="hideThis">hide</a>
</div>
</td>
</tr>
</table>Might I also suggest that you move the .slidingDiv class to the tr instead of the div. As it is right now you're only hiding the div, but the row is still there (even if most browsers would show it with minimal height).
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments