Wednesday, January 23, 2013

Expand or collapse displaying text in asp.net label using more/less link button

To Expand or collapse displaying text in asp.net label using more/less link button use the below code
 <script type="text/javascript">  
   $(document).ready(function () {  
     var showChar = 200;  
     var ellipsestext = "...";  
     var moretext = "more";  
     var lesstext = "less";  
     $('.more span').each(function () {  
       var content = $(this).html();  
       if (content.length > showChar) {  
         var c = content.substr(0, showChar);  
         var h = content.substr(showChar - 1, content.length - showChar);  
         var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';  
         $(this).html(html);  
       }  
     });  
     $(".morelink").click(function () {  
       if ($(this).hasClass("less")) {  
         $(this).removeClass("less");  
         $(this).html(moretext);  
       } else {  
         $(this).addClass("less");  
         $(this).html(lesstext);  
       }  
       $(this).parent().prev().toggle();  
       $(this).prev().toggle();  
       return false;  
     });  
   });  
 </script>  
  • Add the above code in asp.net page
  • Cover the label with div tags and use a class "more" like showing in below code

 <div class="more">  
 <asp:Label ID="Label1" runat="server" Text=""></asp:Label>  
 </div>  

The JavaScript code will search the more class in asp.net design page and apply the more / less functionality.