jquery - Show/Hide Single Row in ASP.NET Repeater -
i'm having trouble showing single row inside repeater. have of them expanding correctly, efforts show 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 space interesting content. <a href="#" class="show_hide">hide</a> </div> </td> </tr> </tbody> </itemtemplate> </asp:repeater> this current jquery, missing toggle 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 need take best guess @ want do:
to make jquery toggle slidingdiv next 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 not work link "hide" inside content row. suggest use class that, lets call hidethis, , script 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 space 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 space interesting content. <a href="#" class="hidethis">hide</a> </div> </td> </tr> </table>might suggest move .slidingdiv class tr instead of div. right you're hiding div, row still there (even if browsers show minimal height).
Comments
Post a Comment