To Expand or collapse displaying text in asp.net label using more/less link button use the below code
The JavaScript code will search the more class in asp.net design page and apply the more / less functionality.
<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> <span class="morecontent"><span>' + h + '</span> <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.
No comments:
Post a Comment