I have a layout created with bootstrap and there is this “read more” button that expands text. When text is expanded it changes to “show less”. My problem is that when user clicks to “show less” button, button-text firstly changes back to “read more” and only THEN text(paragraph) is collapsed. And this time difference is noticeable. But is there a way to make button change its text after the text is collapsed or somehow make this time difference less noticeable?
In my js file there’s only code for button text changing, and text toggling is entirely on bootstrap, maybe I shouldn’t use bootstrap for this particular button?
Note that my problem is not about changing button text from “read more” to “show less” itself, I know there’s a lot of solutions around.
Markup for "read more" button:
<p>Initial text
<span id="moreText" class="collapse">more text here...</span>
<a id="readMore" data-toggle="collapse" href="#moreText">
Read More
</a>
</p>
JS for button:
$(function() {
$('#readMore').click(function() {
$(this).text(function(i,def) {
return def=='Read More' ? 'Show Less' : 'Read More';
});
})
});
I have a layout created with bootstrap and there is this “read more” button that expands text. When text is expanded it changes to “show less”. My problem is that when user clicks to “show less” button, button-text firstly changes back to “read more” and only THEN text(paragraph) is collapsed. And this time difference is noticeable. But is there a way to make button change its text after the text is collapsed or somehow make this time difference less noticeable?
In my js file there’s only code for button text changing, and text toggling is entirely on bootstrap, maybe I shouldn’t use bootstrap for this particular button?
Note that my problem is not about changing button text from “read more” to “show less” itself, I know there’s a lot of solutions around.
Markup for "read more" button:
<p>Initial text
<span id="moreText" class="collapse">more text here...</span>
<a id="readMore" data-toggle="collapse" href="#moreText">
Read More
</a>
</p>
JS for button:
$(function() {
$('#readMore').click(function() {
$(this).text(function(i,def) {
return def=='Read More' ? 'Show Less' : 'Read More';
});
})
});
3 Answers
Reset to default 10I had the same problem, I solved it through a little of css and Bootstrap 4
#summary {
font-size: 14px;
line-height: 1.5;
}
#summary p.collapse:not(.show) {
height: 42px !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#summary p.collapsing {
min-height: 42px !important;
}
#summary a.collapsed:after {
content: '+ Read More';
}
#summary a:not(.collapsed):after {
content: '- Read Less';
}
Here example -> Read Less - Bootstrap 4
Use collapse events, it seems that hidden.bs.collapse it is what you need as it fires after the element has closed. Check documentation for details.
$('#myElementWithCollpse').on('hidden.bs.collapse', function () {
//set text here
})
HTML Code:
<html>
<head>
<title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
<span class="more">
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 modo 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.
</span>
<br><br>
<div class="more">
Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});