Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to read more / hide text using Jquery and PHP

by
Category:php
php mysql javascript jquery
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. You may also like How to wait 5 seconds with jQuery? and Hide elements using jquery on a condition.

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>

0 Comments


Html code work in comment box


Related Post