JSFiddle - React, Tailwind, and code Playground

by tariqulazam

HTML

<div class="text-container">
    <div class="content hideContent">
        Test, only one line.
        <p>        Test, only one line.</p>
                <p>        Test, only one line.</p>
                <p>        Test, only one line.</p>
                <p>        Test, only one line.</p>
                <p>        Test, only one line.</p>
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>

CSS

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

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

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

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    /*padding: 10px 0;*/
    text-align: center;
}

JavaScript

$.fn.HasScrollBar = function() {
    //note: clientHeight= height of holder
    //scrollHeight= we have content till this height
    var _elm = $(this)[0];
    var _hasScrollBar = false; 
    if ((_elm.clientHeight < _elm.scrollHeight) || (_elm.clientWidth < _elm.scrollWidth)) {
        _hasScrollBar = true;
    }
    return _hasScrollBar;
}

$(".show-more a").on("click", function() {
    var $this = $(this); 
    var $content = $this.parent().prev("div.content");
    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);
});


$("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide();