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