Text in div limited characters, add "Read more" link and show all characters when link is clicked

Question

I've a div with text inside that is displayed using PHP & MySQL, the structure is like this:

<div class="description">
    <p>
    Here is a lot of text.
    </p>
</div>

I want to display a "Read more" link when the text inside the p-tag is more than 100 characters. I can display the "Read more" link with PHP like this:

// strip tags to avoid breaking any html
$string = strip_tags($string);

if (strlen($string) > 100) {

    // truncate string
    $stringCut = substr($string, 0, 100);

    // make sure it ends in a word so assassinate doesn't become ass...
    $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="/this/story">Read More</a>'; 
}
echo $string;

The problem is that when the link is clicked I want to show all of the text in the same DIV. Is this possible with PHP or do I need jQuery or something?

Answer 1

If you want to show the full text without a page reload you will have to use javascript/jquery. For that to work the full text has to be in the generated HTML.

I did this by using 2 divs, one with the shortened text and one with the full text which is hidden by default. When 'read more' is clicked I toggle both divs and change the link label to something like 'see less'.

You could also put the not-shortened text as well as the ellipsis in an element like so:

<div class="readmore">
    This is the shortened text<span class="ellipsis">...</span> <span class="moreText">with the full text hidden</span> <a class="more" href="#">read more</a>
</div>

See this fiddle.

Answer 2

You can do this as

<script type="text/javascript">
$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});
</script>
<style type="text/css">
    .show-read-more .more-text{
        display: none;
    }
</style>
<div class="show-read-more">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur,  from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>

Please see this link Show read more link if the text exceeds a certain length using jQuery

Hope this is what you are looking for.