Read more and read less text using jquery in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon