JSFiddle - React, Tailwind, and code Playground

by learningforever

HTML

<div id="profile-description">
            <div class="text show-more-height">
                요약글 1
                <br /><br />
                At Microsoft we help people and businesses throughout the world realize their full potential. <br />
                We make this simple mission come to life every day through our passion to create technologies <br><br>and develop products that touch just about every kind of customer.
            </div>
            <div class="show-more">(Show More)</div><div class="text show-more-height">
               요약글 2 
                <br /><br />
                At Microsoft we help people and businesses throughout the world realize their full potential. <br />
                We make this simple mission come to life every day through our passion to create technologies <br><br>and develop products that touch just about every kind of customer.
            </div>
            <div class="show-more">(Show More)</div><div class="text show-more-height">
                Some random text 
                <br /><br />
                At Microsoft we help people and businesses throughout the world realize their full potential. <br />
                We make this simple mission come to life every day through our passion to create technologies <br><br>and develop products that touch just about every kind of customer.
            </div>
            <div class="show-more">(Show More 3)</div>
</div><!-- [End] #profile-description -->

CSS

#profile-description {
    width: 690px; margin-top: 50px; position:relative;
}
#profile-description .text {
    width: 660px; margin-bottom: 5px; color: #777; padding: 0 15px; position:relative; font-family: Arial; font-size: 14px; display: block;
}
#profile-description .show-more {
    width: 690px; color: #777; position:relative; font-size: 12px; padding-top: 5px; height: 20px; text-align: center; background: #f1f1f1; cursor: pointer;
}
#profile-description .show-more:hover { 
    color: #1779dd;
}
#profile-description .show-more-height { height: 62px; overflow:hidden; }

JavaScript

$(".show-more").click(function () {        
        $(".text").toggleClass("show-more-height");
        if(!$(".text").hasClass("show-more-height")){
            $(this).text("Show Less");
        }else{
            $(this).text("Show More");
        }
    });