Implementing 'Read More - Read Less' in Javascript

javascript
Published on September 21, 2017

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. "....Read More

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');
	}
});
In this Tutorial