I am experimenting with a 'read-more read-less' feature using a wrap method that currently only works for the 'show more' functionality.
So, to clarify, if the text exceeds a certain length, I truncate it and insert a read-more-link (which is functional). Once expanded, I include a read-less-link intended to revert the text back to its original length for subsequent expansion with the read-more-link, but unfortunately, the wrapping does not function as expected.
$(document).ready(function() {
var maxLength = 490;
$(".keimeno").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 + ' <a href="javascript:void(0);" class="read-less">read less</a>' + '</span>');
}
});
$(".read-more").click(function() {
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
$(".read-less").click(function() {
$(this).remove();
$(this).siblings(".more-text").contents().wrap();
});
});.keimeno .more-text {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExL3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Spicy+Rice&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<div class="card">
<ul id="kirio">
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdas SOME TEXT asdasdas(SOME MORE TEXT...)
</p>
</div>
</li>
<li>
<div class="col-lg-12">
<p class="keimeno">
SOME TEXT asdasdas SOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdasSOME TEXT asdasdas SOME TEXT asdasdas(SOME MORE TEXT...)
</p>
</div>
</li>
</ul>
</div>