How To Add More or Less Link to Text OR Show More Link to Shorten Text to Display Rest of Text Using jQuery in C# Asp.Net

How To Add More or Less Link to Text OR Show More Link to Shorten Text to Display Rest of Text Using jQuery in C# Asp.Net

Program:

.Aspx File:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<title>jQuery Add More/Less link to Text</title>
<script type="text/javascript">
$(function () {
var showChar = 120, showtxt = "more", hidetxt = "less";
$('.more').each(function () {
var content = $(this).text();
if (content.length > showChar) {
var con = content.substr(0, showChar);
var hcon = content.substr(showChar, content.length - showChar);
var txt = con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>  <a href="" class="moretxt">' + showtxt + '</a></span>';
$(this).html(txt);
}
});
$(".moretxt").click(function () {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showtxt);
} else {
$(this).addClass("sample");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style type="text/css">
body{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
.more {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
</head>
<body>
<div class="more">
Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
fantasyaspnet.blogspot.in offers many Microsoft related articles. Welcome to fantasyaspnet.blogspot.in.
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
</body>
</html>

Live Demo:

jQuery Add More/Less link to Text

Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

fantasyaspnet.blogspot.in offers many Microsoft related articles. Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

Asp.Net

Pages

Friday 7 June 2013

How To Add More or Less Link to Text OR Show More Link to Shorten Text to Display Rest of Text Using jQuery in C# Asp.Net

No comments:

Post a Comment