Read more read less according to height

by lakshmipriya001

HTML

<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
       voluptua.
    </div>
    <div class="show-more">
        <a href="#">Read more...</a>
    </div>
</div>

CSS

div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.text-content{
    line-height: 1em;
}

.short-text {
    overflow: hidden;
    height: 2em;
}

.full-text{
    height: auto;
}

h1 {
    font-size: 24px;        
}

.show-more {
    padding: 10px 0;
    text-align: center;
}
/* answer */
/* .short-text {
    overflow: hidden;
    min-height: 110px;
    max-height: 110px;
}

.full-text{
     min-height:  110px;
      max-height: max-content;
} */

JavaScript

$(".show-more a").on("click", function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");
    var linkText = $link.text();

    $content.toggleClass("short-text, full-text");

    $link.text(getShowLinkText(linkText));

    return false;
});

function getShowLinkText(currentText) {
    var newText = '';

    if (currentText.toUpperCase() === "READ MORE...") {
        newText = "Read less...";
    } else {
        newText = "Read more...";
    }

    return newText;
}