In this example we explain that how to show “More” and “Less” link using jQuery in asp.net. or show “More” and “Less” link to display the content using jQuery.
Here in this example when you run the form then it
will display some part of the content and show “More” link below. When you
click this link then it will display full content of the form.
For example suppose you have 100 products and you want
to display all in one page so use this show “More” and “Less” link
functionality because you cannot display full content of the one products to a
page because content is very long.
Another example is that if the comment text is very
long then extra words are hide and show using show “More” and “Less” link is
presented to user.
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="showmorelesslink.aspx.cs"
Inherits="WebApplication1_showmorelesslink"
%>
<html>
<head>
<style
type="text/css">
a
{
color:
#0254EB;
}
a:visited
{
color:
#0254EB;
}
a.morelink
{
text-decoration:
none;
outline:
none;
}
.morecontent
span
{
display:
none;
}
.comment
{
width:
400px;
background-color:
#f0f0f0;
margin:
10px;
}
</style>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var
showChar = 100;
var
ellipsestext = "...";
var
moretext = "more";
var
lesstext = "less";
$('.more').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="moreellipses">' + 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>
<title>that how to show “More” and “Less” link using
jQuery in asp.net</title>
</head>
<body>
<div
class="comment
more">
Hello Guys, Welcome to
aspsolutionkirit.blogspot.in, Hi guys "aspsolutionkirit"
Provide a Total or full Solution of
Asp.Net Programming in which we provide most
of the program of the Asp.Net, C#,
Ajax, Jquery, MVC with Asp.Net or Jquery, javascript,
silverlight, devexpress, css, Html,
Html5, css3, Dhtml, wcf, wpf etc... that is
the very useful programming for Dotnet
Developer or who study in IT Field can easily
learn and implement that code by using
the facility provide by the "aspsolutionkirit"
</div>
</body>
</html>
0 comments:
Post a Comment