CODEWITHSUNDEEP
phphtmljquerywordpress
user9437856
user9437856

Reputation: 2388

How to display the read more and read less button in WordPress

I am getting the list from the database and now I have to add the read more and read less button depending upon the content but I am not getting it. I am not getting any error in the console.

if($loop->have_posts() ) {
while($loop->have_posts() ) {
    $loop->the_post();
    $tid = $loop->ID;

 $data .='<li>
        
        <div class="overflowSet"><div class="imgwrap" style="background-image:url('.get_the_post_thumbnail_url($tid).')"></div></div>
        <h5>'.wp_trim_words(get_the_title($tid),9, '...').'</h5>
        <p class="countcontent">'.$the_content.'</p>
    </li>';


    }
}

I added the below script to display the read more and less

$data .='<script>
jQuery(function($){
var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";

$(".countcontent").each(function($) {
    var myStr = $(this).text();
    if (jQuery.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(\'<span class="more-text">' + removedStr + '</span>\');
      $(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');

    }
  });

  $(".read-more").click(function() {
    if($(this).hasClass("more")){
        $(this).removeClass("more");
        $(this).text(lesstxt);
        $(this).siblings(".more-text").show();
    }
    else {
        $(this).addClass("more");
        $(this).text(moretxt);
        $(this).siblings(".more-text").hide();
    }

  });

 });

   </script>';

I am getting the issue in this code

 jQuery(this).append(\'<span class="more-text">' + removedStr + '</span>\');
  jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>\');

If I add the below code then I am getting the text.

 jQuery(this).append(\'<span class="more-text">Read less</span>\');
  jQuery(this).append(\'<a href="javascript:void(0);" class="read-more more">Read more</a>\');

Upvotes: 0

Views: 1604

Answers (1)

Bernhard Beatus
Bernhard Beatus

Reputation: 1216

var maxLength = 390;
var moretxt = "...Read More";
var lesstxt = "Read Less";
var removeStr;
var text = $('.countcontent').text();

$(".countcontent").each(function() {
  var textlength = $(this).text().length;
  if (textlength > maxLength) {
    var myStr = $(this).text();
    var newStr = myStr.substring(0, maxLength);
    var removedStr = myStr.substring(1, maxLength);
    $(this).empty().html(newStr);
    $(this).append('<span class="more more-text">' + moretxt + '</span>');
  } else {
    $(this).append('<sapn class="less less-txt">' + lesstxt + '</a>');
  }
});

$(".more-text").click(function() {
  if ($(this).hasClass("more")) {
    $(this).removeClass("more");
    $('.countcontent').empty();
    $('.countcontent').text(text);
  } else {
    $(this).addClass("more");
    $(this).text(moretxt);
    $(this).siblings(".more-text").hide();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="countcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Upvotes: 1

Related Questions