To Show Some text and after cleikc on read more show all text
<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 = "Read More", hidetxt = "Readless";
// $('.more').each(function () {
var content = $('.more').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>';
$('.more').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">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum laoreet, nunc eget laoreet sa agittis, quam ligula
sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci.
Aliquam mattis purus non mauris blandit id luctus felis convallis. Integer
varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.
</div>
</body>
</html>
SeeImage
SeeImage
Hi,
ReplyDeleteYour Posts are very useful to me...
thanks.