JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="product">
  <div class="header">
    <p>
    Duratherm HF-FG
    </p>
  </div>
  <div class="content">
    <p class="content-text">
      A unique, high flash point, food grade fluid precision engineered to comply with NSF & USDA incidental contact provisions. Its high flash point ensures compliance with stricter insurance and safety requirements.
    </p>
  </div>
</div>

CSS

.product {
  width: 500px;
  border: 1px solid #ccc;
  margin: 20px auto;
  border-radius: 4px;
}

.header {
  background-color: #4682b4;
  color: #fff;
  padding: 5px 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.content {
  padding: 15px;
  transition: 0.3s;
}

JavaScript

var myDiv = $('.content-text');
var limit = 75
if(myDiv.text().length > limit) {
	var fullText = myDiv.text();
	var readMore = "... <a href='#' class='read-more'>More</a>";
	var readLess = " <a href='#' class='read-less'>Less</a>";
	myDiv.html(fullText.substring(0,limit) + readMore);
 }
 
$(document).on("click", ".read-more", function(e) {
	e.preventDefault();
  myDiv.html(fullText + readLess)
})

$(document).on("click", ".read-less", function(e) {
	e.preventDefault();
	myDiv.html(fullText.substring(0,limit) + readMore);
})