Use-Cases of this Tutorial
- When a text is too long to fit, you can cut it short, and add a "See More" button. Clicking on this button will show the complete text.
A good way to reduce a long text to a shorter one is through "Read More - Read Less" functionality. This can be implemented with Javascript.
Demo
" At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you aren't where you want to be, you will always be a failure. "....
How Does it Work ?
Assume you have a long text of the form :
<div>At the end of the day, you are solely responsible for your success and
your failure. And the sooner you realize that, you accept that, and integrate that into your work
ethic, you will start being successful. As long as you blame others for the reason
you aren't where you want to be, you will always be a failure.</div>
The solution is to divide this long text into 4 inline elements :
<div>
<span class="short-text">At the end of the day, you are solely responsible for your success
and your failure. And the sooner you realize that, you accept that, and integr</span>
<span class="long-text">ate that into your work ethic, you will start being successful. As
long as you blame others for the reason you aren't where you want to be, you will
always be a failure.</span>
<span class="text-dots">....</span>
<span class="show-more-button" data-more="0">Read More</span>
</div>
Initially only the span short-text would be seen, and long-text would be hidden.
.long-text {
display: none
}
On clicking show-more-button, long-text would be seen, thereby showing the complete text. Now that complete text is seen, the text in show-more-button would be set to "Read Less".
A click again on show-more-button would hide long-text. show-more-button would hold the text "Read More" now.
Breaking the Long Text into inline Elements
// Long text
var text = 'At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you are not where you want to be, you will always be a failure.';
// Character limit after which "Read More" will be seen
var char_limit = 150;
if(text.length < char_limit)
console.log( '<div> ' + text + '</div>' );
else
console.log( '<div><span class="short-text">' + text.substr(0, char_limit) + '</span><span class="long-text">' + text.substr(char_limit) + '</span><span class="text-dots">...</span><span class="show-more-button" data-more="0">See More</span></div>' );
Implementing with Pure Javascript
document.querySelector('.show-more-button').addEventListener('click', function() {
// If text is shown less, then show complete
if(this.getAttribute('data-more') == 0) {
this.setAttribute('data-more', 1);
this.style.display = 'block';
this.innerHTML = 'Read Less';
this.previousElementSibling.style.display = 'none';
this.previousElementSibling.previousElementSibling.style.display = 'inline';
}
// If text is shown complete, then show less
else if(this.getAttribute('data-more') == 1) {
this.setAttribute('data-more', 0);
this.style.display = 'inline';
this.innerHTML = 'Read More';
this.previousElementSibling.style.display = 'inline';
this.previousElementSibling.previousElementSibling.style.display = 'none';
}
});
Implementing with jQuery
$(".show-more-button").on('click', function() {
// If text is shown less, then show complete
if($(this).attr('data-more') == 0) {
$(this).attr('data-more', 1);
$(this).css('display', 'block');
$(this).text('Read Less');
$(this).prev().css('display', 'none');
$(this).prev().prev().css('display', 'inline');
}
// If text is shown complete, then show less
else if(this.getAttribute('data-more') == 1) {
$(this).attr('data-more', 0);
$(this).css('display', 'inline');
$(this).text('Read More');
$(this).prev().css('display', 'inline');
$(this).prev().prev().css('display', 'none');
}
});