- 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; }
- Replace the_content with
<?php read_more_content();?>
- 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"); });
- Add CSS
.hidden_box { transition: all 2s linear; display: none; } .hidden_box.show { display: inline; }
Jagdish Sarma Asked question March 25, 2022