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
  1. <script type="text/javascript">
  2. $(document).ready(function () {
  3. var showChar = 200;
  4. var ellipsestext = "...";
  5. var moretext = "more";
  6. var lesstext = "less";
  7. $('.more span').each(function () {
  8. var content = $(this).html();
  9. if (content.length > showChar) {
  10. var c = content.substr(0, showChar);
  11. var h = content.substr(showChar - 1, content.length - showChar);
  12. var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
  13. $(this).html(html);
  14. }
  15. });
  16. $(".morelink").click(function () {
  17. if ($(this).hasClass("less")) {
  18. $(this).removeClass("less");
  19. $(this).html(moretext);
  20. } else {
  21. $(this).addClass("less");
  22. $(this).html(lesstext);
  23. }
  24. $(this).parent().prev().toggle();
  25. $(this).prev().toggle();
  26. return false;
  27. });
  28. });
  29. </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

  1. <div class="more">
  2. <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
  3. </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