In
this article I am going to explain how to implement read more/less text functionality
using Jquery in asp.net application.
Description:
In
the previous article I have explained how to save the youtube into database anddisplay it in Gridview using Linq and how to implement the autocompletefunctionality in asp.net application using jquery.
I
have post/write a long paragraph/content on website. It not looks good so I want
to display the 40 character and after that read more hyperlink link. When user
click on it complete paragraph will be display with read less hyperlink button.
Implementation:
Add
the below given Jquery in head section of webform/webpage before </head>
tag.
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var
showChar = 40,
showtxt = "Read
More",
hidetxt = "Read
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("less"))
{
$(this).removeClass("less");
$(this).text(showtxt);
} else
{
$(this).addClass("less");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return
false;
});
});
</script>
Also
add the below given style in head section:
<style type="text/css">
.more {
width: 400px;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
Now
add the class more where you want to implement the show and hide text functionality.
Complete HTML
Markup of webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://code.jquery.com/jquery-1.8.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var
showChar = 40,
showtxt = "Read
More",
hidetxt = "Read
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("less"))
{
$(this).removeClass("less");
$(this).text(showtxt);
} else
{
$(this).addClass("less");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return
false;
});
});
</script>
<style type="text/css">
.more {
width: 400px;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdvideo" runat="server" AutoGenerateColumns="False"
BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px"
CellPadding="4" ForeColor="Black" GridLines="Vertical">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-CssClass="more"/>
<asp:TemplateField HeaderText="Videos">
<ItemTemplate>
<object width="480" height="385">
<embed src='<%#Eval("url") %>' type="application/x-shockwave-flash"
allowscriptaccess="always"
allowfullscreen="true"
width="480"
height="385">
</embed>
</object>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
</form>
</body>
</html>
Run
the application and test its working.
Demo :
In this article we have learn how to implement read more/less text functionality using Jquery in asp.net application. I hope you enjoyed this article.
.png)
Thank you so much. This is the simplest solution ever
ReplyDeleteI am facing one issue. The Jquery works only on the 1st page in the GridView ( with pagination). How to make it work for other pages too?
ReplyDelete