jquery to display comments and clickable link in asp.net datalist

Question

I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.

so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.

greatly appreciate your time and effort.

head section

<script src="jquery-1.4.4.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
       $('Panel1text').hide(); 
    });

    $("#<%=HyperLink1.ClientID%>").click(function() {
        $("<%=Panel1text.ClientID%>").show();
    });
</script>

body section

    <asp:DataList ID="DataList1" runat="server" DataKeyField="cid" 
        DataSourceID="SqlDataSource1" Width="645px">
        <ItemTemplate>
            cid:
            <asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
            <br />
            cuser:
            <asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
            <br />
            blogid:
            <asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
            <br />
            <br />
            <asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
            <br />
            <asp:Panel ID="Panel1text" runat="server">
                <asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
            </asp:Panel>
            <br />
        </ItemTemplate>
    </asp:DataList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>

Answer 1

It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:

.panel { display: none; }

Then use the following jQuery to show the element:

$(document).ready(function(){

   $(".link").click(function(evt){
      evt.preventDefault(); // prevents the click from leaving the page

      $(this).next().show(); // show the panel

   });

});

You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.

Bob