The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
By default our blog posts do not have “Read more” and “Read less” functions. If you want to show only a snippet of each blog post on the main page and have the link “Read more” for users to click and read the rest of the blog post and then have the ability to click “Read less” to see again the snippet of the blog post you need to follow the steps below in order to implement these functions:
1. Go to the Sitefinity backend of your project.
2. Go to the page where you want to display the blog posts.
3. Drag and drop a blog posts widget.
4. Click Edit button in the upper-right corner of the widget.
5. Select List Settings.
6. From the drop-down menu of List templates select Titles and dates.
7. Click Edit the template.
8. Add an import statement to register a SummaryParser's namespace:
<%@ Import Namespace="Telerik.Sitefinity.Data.Summary" %>
9. Add the following source code in the template under the closing div tag </div>:
<
sitefinity:HtmlField
runat
=
"server"
DisplayMode
=
"Read"
CssClass
=
"TestClass1"
Value='<%# SummaryParser.GetSummary(Eval("Content").ToString(),new SummarySettings(SummaryMode.Words,20,false,false)) %>'/>
<
sitefinity:HtmlField
runat
=
"server"
DisplayMode
=
"Read"
Value='<%# Eval("Content")%>' style="display:none" CssClass="TestClass2"/>
<
a
href
=
""
class
=
"read-more"
>Read More</
a
>
<
a
href
=
""
class
=
"read-less"
style
=
"display:none"
>Read Less</
a
>
You can change the value of the SummaryParser if you want to display more or less than 20 words. More information connected to the SummaryParser can be found in this blog post. Summary Settings allows you to cut of the first N words from the content item's content or other meta field.
In the template we have add two content fields. At the begging the first one is the summary content which is visible and the second one is the full content which is invisible. After clicking Read More link the first content will become invisible and the full content will be displayed on the page. Then the link Read More will become invisible and the Read Less link will appear on the page. If you click the Read Less link the full content of the blog post will disappear and the summary content will be displayed.
10. The next step that you need to take is to drag and drop a Java Script widget on the page and add the following source code in the Write JavaScript box:
$(
".read-more"
).click(
function
() {
$(
this
).parent().find(
".TestClass1"
).hide();
$(
this
).parent().find(
".TestClass2"
).show();
$(
this
).parent().find(
".read-less"
).show();
$(
this
).hide();
return
false
;
});
$(
".read-less"
).click(
function
() {
$(
this
).parent().find(
".TestClass2"
).hide();
$(
this
).parent().find(
".TestClass1"
).show();
$(
this
).parent().find(
".read-more"
).show();
$(
this
).hide();
return
false
;
});
Please note that the java script should be included Where the widget is dropped.
I have recorded a video demonstrating how these functions works:
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.