Read more feature

[rotten69]

Hey everyone,

I'm just wondering how the read more feature is achieved in PHP. It is like facebook where it displays a couple of lines then if you're interested in reading more about the status or article click 'read more link' which expands the box.

Cheers,

[pritaeas]

There are two options (Javasccript, not really PHP).

1. Simplest: the full text is already in a div, but hidden, and clicking the link will just display that div.

2. Clicking the link does an AJAX call to a server side script to get the full article, and replaces what's already there.

[rotten69]

Is that an easy job? I mean a function or two in jquery becuase I'm designing the app for smart devices.

[rotten69]

I get the second step. For the first one though, how could you determine the number of lines to display? is there an example you can refer me to?

[pritaeas]

http://www.pritaeas.net/public/jquery/partial-text/index.html

[JorgeM]

Here is an example of a "Read More/Less" feature using jQuery.

<p id="mytext" style="width:260px;height:200px;overflow:hidden;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.</p>
<a href="#" id="readml">Read More</a>

<script type="text/javascript">
    $(document).ready(function () {
        var less = 200;
        var h = $('#mytext')[0].scrollHeight;
        $("#readml").toggle(function () {
            $('#mytext').animate({ height: h }, "slow");
            $(this).text("Read less");
        }, function () {
            $('#mytext').animate({ height: less }, "slow");
            $(this).text("Read More");
        });
    });
</script>