when we have to show large text in a small div instead of giving overflow:scroll directly we can give Read more option so that user can know there is more text below>
Solution.
Create a div in html file.
<button class=“read-more”>Read More</button>
create a even for that button as shown below.
Write the CSS code According to requirement
initial CSS
ovwerflow: hidden;
max-height:250px;
events: {
‘click .read-more’: ‘readMore’
},
Create a function for that
readMore: function (event) {
var readmoreoption = $(event.currentTarget);
var descriptionContent = readmoreoption.siblings(‘.rating-client-testimony’);
descriptionContent.css({
‘overflow-y’: ‘scroll’
});
if ($(window).width() < 767) {
descriptionContent.css({
‘max-height’: ‘210px’
});
} else {
descriptionContent.css({
‘max-height’: ‘260px’
});
}
readmoreoption.css({
‘display’: ‘none’
});
}