How to read more / hide text using Jquery and PHP

If you have set your php site to display post excerpts on the front or home page, you will want visitors to click on the read more link and show full text after click on hide link show small text see below code.

PHP and HTML Code

<div id="smallRead">
     <?php
        $string = $profileinfo['description'];
        if (strlen($string) > 150) {
            $stringCut = substr($string, 0, 150);
            $endPoint = strrpos($stringCut, ' ');
            $string = $endPoint? substr($stringCut, 0, $endPoint):substr($stringCut, 0);
            $string .= '... <a style="cursor: pointer;" id="HideReadmoreDisplay">Read More</a>';
        }
        echo $string;
        ?>
</div>
<div id="FullRead" style="display: none;">
     <? echo strip_tags($profileinfo['description']).'... <a style="cursor: pointer;" id="ReadmoreDisplay">Hide</a>'; ?>
</div>

Jquery Code

<script type="text/javascript">
    $('#ReadmoreDisplay').click(function(){
        $('#FullRead').hide();
        $('#smallRead').show();
    });
    $('#HideReadmoreDisplay').click(function(){
        $('#smallRead').hide();
        $('#FullRead').show();
    });
</script>