More in this section
Categories
Bloggers
Blogs RSS feed

Implementing “Read more” and “Read less” functions in blog posts

by Stefani Tacheva

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:

6 comments

Leave a comment
  1. Ryan Dec 18, 2012
    It might actually be way more efficient to instead of hiding and showing multiple items to just wrap that code in a div and append a css class denoting the state....then just hide\show the elements with css.
  2. Printershelpline Aug 26, 2017
    Hey! Nice post. Thanks for sharing this.We provide Canon Printer Support.if you want any solution related to Canon Printer than visit here: Canon Support Number
    Printers Support
  3. Anisha Sep 04, 2017
    I am for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot. I hope to present something back and help others such as you helped me.Call Girls Mahipalpur
  4. Sarah Sep 22, 2017
    It's a great blog post.Good sparkling user interface and very informative blogs.Keep up the good works. Lexmark Support Number
  5. s-bobet.com Oct 15, 2017
    It has fully emerged to crown Singapore's southern shores and undoubtedly placed her on the global map of residential landmarks. I still scored the more points than I ever have in a season for GS. I think you would be hard pressed to find somebody with the same consistency I have had over the years so I am happy with that. s-bobet.com
  6. 21 Questions Oct 17, 2017
    I am overwhelmed by your post with such a nice topic. Usually I visit your blogs and get updated through the information you include but today’s blog would be the most appreciable. Well done! 21 Questions

    Leave a comment