JSFiddle - React, Tailwind, and code Playground
HTML
<div><img src="http://placehold.it/400x400"></div>
<div id="slice_img">
<img src="http://placehold.it/400x400">
<div id="slice_pre">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id aliquet nisl. Etiam eu ante velit. Maecenas in lectus dapibus, volutpat lectus quis, eleifend nunc. Nulla sollicitudin ultricies faucibus. Ut mi quam, faucibus vitae sem in, sollicitudin euismod enim. Suspendisse et euismod est. Morbi blandit posuere risus sed mattis. Suspendisse a massa nisl. Donec lectus quam, pulvinar vitae ultrices sit amet, dignissim ut magna. Cras quis pretium nunc. Nulla eget elementum ipsum. Aenean at nunc nulla. Maecenas elementum quam eget dictum consectetur.
</div>
</div>
<div><img src="http://placehold.it/400x400"></div>
<div><img src="http://placehold.it/400x400"></div>
<div><img src="http://placehold.it/400x400"></div>
CSS
#slice_pre {
display: none;
}
JavaScript
$(document).ready(function(){
$("#slice_img").click(function(){
$("#slice_pre").slideToggle("slow", function() { // add a callback function to slideToggle
$('html, body').animate({
scrollTop: $("#slice_pre").offset().top
}, 1000);
});
});
});