JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">Full text here...</div><a href="" class="readmore">More...</a>
<div class="content">Full text here...</div><a href="" class="readmore">More...</a>
<div class="content">Full text here...</div><a href="" class="readmore">More...</a>

CSS

.content{ width:100%; height:50px; border-bottom:2px solid #fff; background:#eee; }
.readmore{ float:left; width:100%; height:20px; background:#a00; }

JavaScript

$("a.readmore").click(function(e){
    if($(this).prev("div.content").hasClass("open")){
        $(this).prev("div.content").animate({"height":50}).removeClass("open");
        $(this).html("More...");
    }else{
        $(this).prev("div.content").animate({"height":500}).addClass("open");
        $(this).html("Less...");
    }
    
    e.preventDefault();
});