Creating Excerpt text with a read more link

Question

I have a varchar field full of text and I want to be able to just show a 100 character snippet of the text, and show a "Read More..." link at the end of the snippet. When the user clicks "Read More..." I would like the page to expand and display the rest of the text.

I guess the 'show/hide' featured could be done with jQuery but i wasn't sure if ASP had some function to effectively split the varchar field of text in two?

My content is currently being pulled into the page using;

<%=StripHTML(rspropertyresults.Fields.Item("ContentDetails").Value)%>

Which uses this function to strip out any HTML tags;

<%
Function stripHTML(strHTML)
  ''Strips the HTML tags from strHTML

  Dim objRegExp, strOutput
  Set objRegExp = New Regexp

  objRegExp.IgnoreCase = True
  objRegExp.Global = True
  objRegExp.Pattern = "<(.|\n)+?>"

  ''Replace all HTML tag matches with the empty string
  strOutput = objRegExp.Replace(strHTML, "")

  ''Replace all < and > with &lt; and &gt;
  strOutput = Replace(strOutput, "<", "&lt;")
  strOutput = Replace(strOutput, ">", "&gt;")

  stripHTML = strOutput    ''Return the value of strOutput

  Set objRegExp = Nothing
End Function
%>

Answer 1

Try using this as a starting point.

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa lectus, pulvinar vel scelerisque eget, 
    rutrum et nisi. Mauris semper viverra lorem sit amet faucibus. Fusce egestas metus sit amet lectus interdum 
    sollicitudin. Maecenas accumsan metus scelerisque tortor lobortis et pretium nibh cursus.
</p>
<script type="text/javascript">
    $(function() {
        var textToHide = $('p').text().substring(100);
        var visibleText = $('p').text().substring(1, 100);

        $('p')
            .html(visibleText + ('<span>' + textToHide + '</span>'))
            .append('<a id="read-more" title="Read More" style="display: block; cursor: pointer;">Read More&hellip;</a>')
            .click(function() {
                $(this).find('span').toggle();
                $(this).find('a:last').hide();
            });

        $('p span').hide();
    });
</script>

So what I've done here is create two variables: one to hold the first 100 characters ("visibleText") and one to hold the rest ("textToHide").

We then tell jQuery to find every paragraph tag (you'll likely want to define a more specific selector), wrap the text in a span tag and put that all back on the visible text, append a link at the end of all this to show the text we'll be hiding and finally assign a click event to do it.

The click function simply looks for all span tags in the paragraph, toggles them visible (the show() function might be a better choice here, actually) and then hides the "Read more" link.

Finally we make sure our paragraph's span tags start off being hidden. You might actually want to create a CSS rule (p span {display: none;}) so that the text still starts hidden, but is done faster than JavaScript. A jQuery show() function will still override that css rule when called.

That should about do it.

Answer 2

Everything you are after is doable and quite easy really once you get your head around it. I'm not a jquery man (Mootools for me!) so can't help you there.

For the ASP truncate function though you need to be careful. You have the right idea though in stripping the html or else you could leave an un-closed tag open (an unclosed div or script tag could really mess with your layout).

I would:

• Strip it first
• If the length was less than you wanted to truncate it by just display it
• Other wise use Left( your_string, 300 ) to only grab the first 300 characters (for instance) then append a "..." on the end or what ever. Nice and easy.

You can try to get fancy and try to split it on the next space so you don't cleave words in half but can't remember off hte top of my head how to do that in VBScript. JS no problem!