Wednesday, October 21, 2015

Read more and read less text using jquery in asp.net

In this article I am going to explain how to implement read more/less text functionality using Jquery in asp.net application.

Description:

I have post/write a long paragraph/content on website. It not looks good so I want to display the 40 character and after that read more hyperlink link. When user click on it complete paragraph will be display with read less hyperlink button.

Implementation:

Add the below given Jquery in head section of webform/webpage before </head> tag.

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           var showChar = 40,
           showtxt = "Read More",
           hidetxt = "Read Less";
           $('.more').each(function () {
               var content = $(this).text();
               if (content.length > showChar) {
                   var con = content.substr(0, showChar);
                   var hcon = content.substr(showChar, content.length - showChar);
                   var txt = con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="moretxt">' + showtxt + '</a></span>';
                   $(this).html(txt);
               }
           });
           $(".moretxt").click(function () {
               if ($(this).hasClass("less")) {
                   $(this).removeClass("less");
                   $(this).text(showtxt);
               } else {
                   $(this).addClass("less");
                   $(this).text(hidetxt);
               }
               $(this).parent().prev().toggle();
               $(this).prev().toggle();
               return false;
           });
       });
</script>

Also add the below given style in head section:


<style type="text/css">
.more {
width: 400px;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>

Now add the class more where you want to implement the show and hide text functionality.

Complete HTML Markup of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           var showChar = 40,
           showtxt = "Read More",
           hidetxt = "Read Less";
           $('.more').each(function () {
               var content = $(this).text();
               if (content.length > showChar) {
                   var con = content.substr(0, showChar);
                   var hcon = content.substr(showChar, content.length - showChar);
                   var txt = con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="moretxt">' + showtxt + '</a></span>';
                   $(this).html(txt);
               }
           });
           $(".moretxt").click(function () {
               if ($(this).hasClass("less")) {
                   $(this).removeClass("less");
                   $(this).text(showtxt);
               } else {
                   $(this).addClass("less");
                   $(this).text(hidetxt);
               }
               $(this).parent().prev().toggle();
               $(this).prev().toggle();
               return false;
           });
       });
</script>
<style type="text/css">

.more {
width: 400px;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grdvideo" runat="server" AutoGenerateColumns="False"
            BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
            CellPadding="4" ForeColor="Black" GridLines="Vertical">
            <AlternatingRowStyle BackColor="White" />
        <Columns>
        <asp:BoundField DataField="Title" HeaderText="Title" />
        <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-CssClass="more"/>
       <asp:TemplateField HeaderText="Videos">
       <ItemTemplate>
       <object  width="480" height="385">
  <embed src='<%#Eval("url") %>' type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385">
    </embed>
  </object>  
       </ItemTemplate>
       </asp:TemplateField>
        </Columns>
            <FooterStyle BackColor="#CCCC99" />
            <HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
            <RowStyle BackColor="#F7F7DE" />
            <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#FBFBF2" />
            <SortedAscendingHeaderStyle BackColor="#848384" />
            <SortedDescendingCellStyle BackColor="#EAEAD3" />
            <SortedDescendingHeaderStyle BackColor="#575357" />
        </asp:GridView>      
    </div>
    </form>
</body>
</html>

Run the application and test its working.
 Demo :
Read more and read less text using jquery in asp.net

 In this article we have learn how to implement read more/less text functionality using Jquery in asp.net applicationI hope you enjoyed this article.

2 comments:

  1. Thank you so much. This is the simplest solution ever

    ReplyDelete
  2. I am facing one issue. The Jquery works only on the 1st page in the GridView ( with pagination). How to make it work for other pages too?

    ReplyDelete