Show more Show less feature using jQuery example

Please refer below code.

HTML

<div>
    <style type="text/css">
        .button
        {
            padding: 5px 5px 5px 5px;
            color: Blue;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=tblArticles] [id*=btnMore]').on('click', function () {
                var Des = $(this).closest('[id*=dvDescription]');
                $(Des).find('[id*=dvLessDes]').hide();
                $(Des).find('[id*=dvMoreDes]').show();
                return false;

            });
            $('[id*=tblArticles] [id*=btnLess]').on('click', function () {
                var Des = $(this).closest('[id*=dvDescription]');
                $(Des).find('[id*=dvLessDes]').show();
                $(Des).find('[id*=dvMoreDes]').hide();
                return false;
            });
        });
    </script>
    <asp:ListView ID="ListView1" runat="server" GroupItemCount="1" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table>
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <td>
                <table id="tblArticles" cellpadding="2" cellspacing="0" border="1" style="width: 300px;
                    height: 100px;">
                    <tr>
                        <td>
                            <b><u><span class="name">
                                <%# Eval("ArticleName") %></span></u></b>
                            <tr>
                                <td>
                                    <div id="dvDescription">
                                        <div id="dvLessDes">
                                            <asp:Literal Text='<%#Eval("Description").ToString().Substring(0,50) %>' runat="server" />
                                            .....
                                            <input id="btnMore" type="button" value="More" class="button" />
                                        </div>
                                        <div id="dvMoreDes" style="display: none">
                                            <asp:Literal Text='<%#Eval("Description") %>' runat="server" />
                                            <input id="btnLess" type="button" value="Less" class="button" />
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </td>
                    </tr>
                </table>
        </ItemTemplate>
    </asp:ListView>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ArticleName");
        dt.Columns.Add("Description");
        dt.Rows.Add("Populate ASP.Net ListView from database and Repeat columns horizontally using GroupTemplate", "Here Mudassar Ahmed Khan has explained how to populate the ASP.Net ListView control from database and how to use repeat the ListView Items horizontally using its GroupItemCount and GroupTemplate property.<br />In this article I will explain how to populate the ASP.Net ListView control from database and how to use repeat the ListView Items horizontally using its GroupItemCount property Database and Connection string <br />For this sample to work you will need to download the Microsoft Northwind database using the following link");
        dt.Rows.Add("How to use table layout in ListView control in ASP.Net", "Here Mudassar Ahmed Khan has explained how to use HTML Table layout in ListView control in ASP.Net.<br />In this article I will explain how to use HTML Table layout in ListView control in ASP.Net.<br /> Here I am making use of HTML Table Layout for the ListView control. I have placed the HTML Table inside the LayoutTemplate with Table Header and then a GroupPlaceHolder and finally the Footer row with a DataPager control in it.<br /> The GroupPlaceHolder will display the contents from GroupTemplate. The GroupTemplate contains a PlaceHolder wrapped within TR Tags.");
        ListView1.DataSource = dt;
        ListView1.DataBind();
    }
}

Screenshot