javascript - Toggle Div tag inside a datalist -
<asp:datalist id="dldatalist" runat="server"> <itemtemplate> <p> <h4> <div class="ntitle" id='<%# eval("email_id") %>'> <asp:label id="label30" runat="server" text='<% #eval("departure_country") %>'></asp:label> - <asp:label id="label31" runat="server" text='<% #eval("arrival_country") %>'></asp:label> </div> </h4> </p> <div class="ncontent" id='d<%# eval("email_id") %>'> <asp:label id="label32" runat="server" text="company name" width="250px"></asp:label> <asp:label id="label33" runat="server" text='<% #eval("comp_name") %>'></asp:label> <br /> <asp:label id="label34" runat="server" text="contact person" width="250px"></asp:label> <asp:label id="label35" runat="server" text='<% #eval("contact_person") %>'></asp:label> <br /> `enter code here` </div> <script language="javascript" type="text/javascript"> $("div.ntitle").click(function () { debugger; // $(this).closest('div').next('.ncontent').slidetoggle(); $(this).next('.ncontent').slidetoggle(); }); </script> i have 1 datalist 2 div tags. write code in javascript click on 1 div toggle related next div. when click on first div class-name ntitle not toggle next div tag class "ncontent".
jquery next function finds following sibling of element (or 1 if selector passed) , here ncontent div not sibling of ntitle. since datalist control repeat dynamically. here can find parent row (renderred datalist control) , use context find ncontent div. work expected:-
$(document).ready(function () { $(".ntitle").click(function () { var parentrow = ($(this).parents('tr')); //find parent row $('div.ncontent', parentrow).slidetoggle(); //find ncontent div inside row }); }); 
Comments
Post a Comment