JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h1>Read More and Read less content on click</h1>

<div class="moreless-area col-sm-4 shad-dp20">
				<h3>Read More / Less</h3>
				  <div class="moreless on">
					<p>dsad Bibendum bibendum tincidunt et cum habitasse suspendisse tortor ullamcorper convallis a hac cursus est suspendisse ullamcorper condimentum tempor dui a a eros tristique a dignissim sagittis curae amet.Est nec nibh nostra at sodales dolor scelerisque
					in parturient odio metus placerat venenatis eu ultricies neque scelerisque dapibus at.</p>
					<span class="inkd h1">Hussain</span>
				  </div>
				  <a class="moreless-btn align-right ">Read more</a>
				</div>
				<div class="moreless-area col-sm-4 shad-dp20">
				<h3>Read More / Less</h3>
				  <div class="moreless on">
					<p>dsad Bibendum bibendum tincidunt et cum habitasse suspendisse tortor ullamcorper convallis a hac cursus est suspendisse ullamcorper condimentum tempor dui a a eros tristique a dignissim sagittis curae amet.Est nec nibh nostra at sodales dolor scelerisque
					in parturient odio metus placerat venenatis eu ultricies neque scelerisque dapibus at.</p>
					<span class="inkd h1">Hussain</span>
				  </div>
				  <a class="moreless-btn align-right ">Read more</a>
				</div>

CSS

/**read more read less content**/
.moreless.on {
  display: block;
  height:4em; /* Fallback for non-webkit */
  display: -webkit-box; /* Fallback for non-webkit */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JavaScript

/**read more read less content**/
jQuery('.moreless-area .moreless-btn').click(function() {
  if (jQuery(this).hasClass("less")) {
    jQuery(this).removeClass("less");
    jQuery(this).html("Read more");
    jQuery(this).parent().children(".moreless").addClass("on");
  } else {
    jQuery(this).addClass("less");
    jQuery(this).html("Read less");
    jQuery(this).parent().children(".moreless").removeClass("on");
  }
});
/**./read more read less content**/