Как отобразить ссылку читать больше и меньше, если текст превышает

Question

Я получаю содержание абзаца из базы данных. Я пытаюсь показать 300 символов на экране, добавляя read more, который работает.

Моя проблема в том, что я должен отображать less также, когда пользователь нажимает read more, чтобы пользователь мог меньше контент. Я пробовал под кодом

$(document).ready(function() {
  var maxLength = 300;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
  });
  $(".read-more").click(function() {
    $('.less').show();
    $(this).append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();

  });
  $(".less").click(function() {
    $(this).siblings(".more-text").contents().wrap();
    $(this).remove();
  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer 1

Изменен ваш код, чтобы заставить его работать, есть несколько изменений, поясню между самим кодом.

$(document).ready(function() {
  var maxLength = 300;
  var readMore = null;
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.trim(myStr).length > maxLength) {
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append(' <a href="javascript:void(0);" class="read-more">...READ MORE</a>');
      $(this).append('<span class="more-text">' + removedStr + '</span>');
      // Stored the content inside an global variable as on unwrapping the element, the element is removed from the DOM.
      readMore = $(this).find(".more-text").contents();
    }
  });
  $(".read-more").click(function() {
    // Added parent method to target parent element as this element will be hidden so content inside it won't be visible
    $(this).parent().append(' <a href="javascript:void(0);" class="less">LESS</a>');
    $(this).siblings(".more-text").contents().unwrap();
    $('.less').show();
    $(this).hide();
    
    // Added click listener inside the read more click listener as element would only be created after clicking on read more
    var parentThis = this;
    // Stored parent "this ref" in a variable to remove the less element
    $(".less").click(function() {
      // Wrapped the previously stored content in span as earlier.
      readMore.wrap('<span class="more-text"></span>');
      // Made read more visible
      $(parentThis).show();
      // Removed the less element
      $(this).remove();
    });

  });
});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Прочтите комментарий до кода

Answer 2

Я внес несколько изменений в ваш код js, чтобы он работал, попробуйте следующее:

$(document).ready(function() {
  var maxLength = 300;
  var moretxt = "...Read More";
  var lesstxt = "...Read Less";
  $(".countParawords").each(function() {
    var myStr = $(this).text();
    if ($.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();
    }

  });

});

.box {
  width: 500px;
  margin: auto;
}

.box .more-text {
  display: none;
}

.box .less {
  display: none;
}

<div class="box">
  <p class="countParawords">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Надеюсь, это поможет.