Skip to content

Instantly share code, notes, and snippets.

@utkrishta
Created May 30, 2022 05:58
Pure Javascript to limit(hide) characters and show on clikc
window.addEventListener('load', function() {
const testimonialItems = document.querySelectorAll('.testimonial-item');
testimonialItems.forEach(testimonialItem => {
var maxLength = 200;
const textLength = testimonialItem.innerText.length;
if(textLength > maxLength) {
var shortContent = testimonialItem.innerText.substring(0, maxLength); /*split the content in two parts*/
var longContent = testimonialItem.innerText.substring(maxLength);
testimonialItem.innerHTML = shortContent + '<i class="read_more">...<strong> Read More</strong></i>';
const readbtn = testimonialItem.querySelectorAll('.read_more');
readbtn.forEach(showMore =>{
showMore.addEventListener('click', function(event){
showMore.style.display = "none"; /*hide Read More link*/
testimonialItem.innerHTML = shortContent + longContent; /*show all content*/
});
});
}
});
});
@utkrishta
Copy link
Author

This function limits the number of characters to 200. Hides the remaining and add "...read more" which is clickable. Upon click reveals the entire texts.
Implementation example: https://codepen.io/utk_adk/pen/PoQQggm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment