Using Javascript to view a hidden div tag in Listview ASP.NET

Question

 <ItemTemplate> <tr bgcolor="#efefef"> <td width="10%"> <asp:LinkButton ID="btnShowRoles" runat="server"> <asp:Image ID="viewRoles" ImageUrl="/images/pointer-down.gif" runat="server" /></asp:LinkButton> </td> <td width="50%" align="left"> <font face="verdana" size="1"> <asp:Label runat="server" ID="lblParameter"><%#Eval("Name") %></asp:Label> </font> </td> <td width="10%" align="center"> <font face="verdana" size="1"> <asp:Label runat="server" ID="lblType"><%#Eval("Type.Name")%></asp:Label> </font> </td> <td width="10%" align="center"> <font face="verdana" size="1"> <asp:Label runat="server" ID="lblRequired"><%#Eval("isGlobal") %></asp:Label> </font> </td> <td width="20%" align="center"> <font face="verdana" size="1"><a href='<%#GetRedirectionURL(Eval("ID")) %>'>VIEW</a> </font> </td> </tr> <tr> <td> <div align="left" class="ShowRoles"> <asp:Label ID="Label3" runat="server">GROUPS:</asp:Label> <asp:Label ID="Label4" runat="server"><%#Eval("MarjorieRoles") %></asp:Label> </div> </td> </tr> 

This is the code for my ItemTemplate in a ListView. I want the linkbutton in the first to show the fields whenever clicked. I am new to javascript and have absolutely no idea how to go about it. Any help would be appreciated. Thanks

Answer 1

This is not a specific question, but I can give you a few pointers to help you get started.

1) In HTML, each element on your page is marked with an id attribute. In JavaScript, you can use the function document.getElementById to get an element by its id. You can also use an element's class with document.getElementsByClass .

2) And this is very important. Any time you add a server-side control to your page, it will be assigned an id in the resulting HTML that may be completely different from the ID you specify in the mark-up. In ASP.net, you can get the client-side id by writing <%= elementId.ClientID %> .

3) A library like jQuery may be very helpful in simplifying your development. With jQuery, you would use the $.click function to attach an event to the buttons click event. You can use the $.show function to make a hidden element appear.