JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<p class="message">
  Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar   Lorem ipsum dollar
</p>
<span class="show_more">show</span>

CSS

.message {
  height: 104px;
  width: 100px;
  overflow-y: scroll;
}

JavaScript

document.querySelector("body").addEventListener("click", function(e) {
		if(e.target && e.target.nodeName == "span" && e.target.className == 'show_more') {
				scrollDown(document.querySelector('.message'));
        console.log('click')
		}
	});
  
    function scrollDown(element) {
    var scrollHeight = element.scrollHeight;
    function step(element) {
      element.scrollTop += element.clientHeight
    }
    window.requestAnimationFrame(step);
}