0
  1. Create a function

    function read_more_content(){
    $string = get_the_content();
    $hiddstring = get_the_content();	
       if (strlen($string) > 120) {
           $string = substr($string, 0, 114);// change 15 top what ever text length you want to show.
           // $endPoint = strrpos($stringCut, ' ');
           // $string = $endPoint? substr($stringCut, 0, $endPoint):substr($stringCut, 0);
        $string .= '<span class="hidden_box">'.substr($hiddstring, 114).'</span>';
         $string .= '<a href="javascript:void(0)" class="read_more">...Read More</a>';
       }
       echo $string;	
    }

  2. Replace the_content with

    <?php read_more_content();?>

  3. Add Js

    jQuery(document).on('click', '.read_more', function(e) {
          jQuery(this).toggleClass("open");
          jQuery('.read_more.open').html('Read Less');
        jQuery('.read_more:not(.open)').html('...Read More');
          jQuery(this).prev('.hidden_box').toggleClass("show");
       });

  4. Add CSS

    .hidden_box {
        transition: all 2s linear;
        display: none;
    }
     .hidden_box.show {
        display: inline;
    }

Jagdish Sarma Asked question March 25, 2022
Add a Comment