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> <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