Creating Excerpt text with a read more link

asp-classic, jquery

Solution

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.

Problem

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 %> ```

Original source