Show/Hide asp datalist rowitem using jquery

See more:

C#

ASP.NET

jQuery

I have a datalist which is populating Comments from table [Comments]..
Suppose at a particular time there are 10 rows in the table [Comments]..

I want to show only top 3 rows [in desc] and hide the rest. and show a 'load more' button. When the user clicks on 'load more' it should display 5 more rows (3+5=8 rows in total).. Again on clicking 'load more' 5 more should display... This should continue till all the rows are displayed and then 'hide comments' button should show up! On clicking 'hide comments' all the rows should dissapear from the datalist and only top 3 rows should be displayed!

You can say, i need a comment box similar to fb! But I'm avoiding ajax call to populate the comments since I know there would be very less comments and there should be no problem in calling all the comments from server at once and hiding and showing them at client side..

<div class="container col-md-6">
                                <asp:DataList ID="DataListComments" runat="server" DataKeyField="Pk_Comment_Id" ItemStyle-Width="100%" DataSourceID="SqlDataSourceComments" RepeatLayout="Flow" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical">
                                    <FooterStyle HorizontalAlign="Center" Width="100%" BackColor="#CCCCCC" />
                                    <FooterTemplate>
                                        <asp:LinkButton ID="LoadMoreComments" runat="server" OnClientClick="return false;">Load More</asp:LinkButton>
                                    </FooterTemplate>
                                    <HeaderStyle BackColor="Black" HorizontalAlign="Center" Width="100%" Font-Bold="True" ForeColor="White" />
                                    <HeaderTemplate>
                                        <asp:Label ID="lblCommentsHeader" runat="server" ForeColor="White" Text="Comments" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <div class="row box">
                                            <div class="CommentImage col-md-4">
                                                <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank"
                                                    NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'>
                                                    <asp:Image ID="imgUserC" runat="server"
                                                        ImageUrl='<%# Eval("Profile_Pic") %>' CssClass="scaling-image img-thumbnail" />
                                                </asp:HyperLink>
                                            </div>
                                            <div class="CommentInfo col-md-8">

                                                <div class="CommentUsername col-xs-12 col-md-12">
                                                    <asp:HyperLink ID="linkUserProfile" runat="server" Target="_blank"
                                                        NavigateUrl='<%# "Profile.aspx?uid=" + Eval("fk_User_Id")%>'><%# Eval("Username") %></asp:HyperLink>
                                                    (<%# Eval("Date") %>)

                                                </div>

                                                <div class="col-md-12 justify">
                                                    <%# Eval("Description") %>
                                                </div>

                                            </div>
                                        </div>
                                        <asp:Label ID="Pk_Comment_IdLabel" runat="server" Text='<%# Eval("Pk_Comment_Id") %>' Visible="false" />
                                        <asp:Label ID="fk_Solution_IdLabel" runat="server" Text='<%# Eval("fk_Solution_Id") %>' Visible="false" />
                                        <asp:Label ID="fk_User_IdLabel" runat="server" Text='<%# Eval("fk_User_Id") %>' Visible="false" />
                                        <asp:Label ID="Is_ActiveLabel" runat="server" Text='<%# Eval("Is_Active") %>' Visible="false" />
                                    </ItemTemplate>
                                    <SelectedItemStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
                                </asp:DataList>
                                <asp:SqlDataSource ID="SqlDataSourceComments" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT C.Pk_Comment_Id, C.fk_Solution_Id, C.fk_User_Id, C.Description, C.Date, U.Pk_User_Id, U.First_Name, U.Last_Name, U.Username, U.Profile_Pic, U.Email, U.Password, U.Is_Active, C.fk_Solution_Id AS Expr1 FROM dml_np_Comment AS C INNER JOIN dml_np_User AS U ON C.fk_User_Id = U.Pk_User_Id WHERE (C.fk_Solution_Id = @SID)">
                                    <SelectParameters>
                                        <asp:ControlParameter ControlID="SolutionID" Name="SID" PropertyName="Text" />
                                    </SelectParameters>
                                </asp:SqlDataSource>

                                <!--Comment Box-->
                                <div class="row">
                                    <asp:LinkButton ID="btnAddComment" OnClientClick="return false;" runat="server" CssClass="btnAddCom">Add your comment</asp:LinkButton>

                                    <div class="addComment" id="AddCommentBox">
                                        <asp:TextBox ID="txtAddComment" TextMode="MultiLine" Rows="2" Width="100%" runat="server" CssClass="AddCommentText"></asp:TextBox>
                                        <asp:Button ID="btnSubmitComment" runat="server" Text="submit" CssClass="btnSubmitCom" />
                                    </div>
                                </div>

                                <!--End Comment Box-->

                            </div>