JSFiddle - React, Tailwind, and code Playground

HTML

<div class="post">
    <div class="hideContent">
        <div class="post-text">
        Lorem ipsum dolor sit amet, ex mel graece iuvaret. Ius cu cetero nonumes complectitur, no clita accusam splendide pri. Ea sit tale democritum, ea meis rebum est..</div>
            <div class="post-action">
               <input type="button" value="Like" id="like_86_cmpq0" class="like">
               <span class="likesTotal" id="likes_86_cmpq0">0</span></div>
            </div>
<div class="showMore"><a href="#">Show more</a></div>
</div>

CSS

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

JavaScript

$(".showMore a").on("click", function() {

    var $this = $(this); 
    //var $content = $this.parent().prev("div.content");
    var $content = $this.closest("hideContent");
    var linkText = $this.text().toUpperCase();    
    
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $content.switchClass("hideContent", "showContent", 400);
    } else {
        linkText = "Show more";
        $content.switchClass("showContent", "hideContent", 400);
    }

    $this.text(linkText);
});