JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h1>Read more Text for long content</h1>
<div class="techno-box col-sm-3">
	<div class="tech-img"><img src="images/tech19.jpg" alt="" /></div>
    <div class="tech-cont">
    <p class="limit">We stand out when it comes to developing high-performance PHP based web applications built on MYSQL database. Our teams of experts are highly proficient in the combination of LAMP – Linux Apache MySQL and PHP. When these languages are combined they offer extremely impressive results.</p>
            <a class="more align-right">Read more</a></div>
</div>


<div class="techno-box col-sm-3">
	<div class="tech-img"><img src="images/tech20.jpg" alt="" /></div>
    <div class="tech-cont">
	<p class="limit">It is an open-source and document-oriented database system. Unlike traditional databases, MongoDB does not store data in table format instead it uses more structured data format like JSON with dynamic schemas.</p>
            <a class="more align-right">Read more</a></div>
</div>

<div class="techno-box col-sm-3">
	<div class="tech-img"><img src="images/tech21.jpg" alt="" /></div>
    <div class="tech-cont">
	<p class="limit">It is an open-source and document-oriented database system. Unlike traditional databases, MongoDB does not store data in table format instead it uses more structured data format like JSON with dynamic schemas.</p>
            <a class="more align-right">Read more</a></div>
</div>

CSS

.col-sm-3 {
    width: 25%;
    float:left;
}

.more{ color:#d00; }

JavaScript

$('.limit').each(function(){
    $(this).data('content', $(this).text())
    $(this).data('limit', $(this).text().substring(0, 40))
    $(this).text( $(this).data('limit'))
})
 

    $('.more').click(function() { 

        var $this = $(this);
        var elP = $this.siblings('p');
        var length = elP.text().length;

        if(length == 40){

            elP.text(elP.data('content'));

        }
        else {
            elP.text(elP.data('limit'));
        }

    });