JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div id="portfolio">This is inner box <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis. <br /> Lorem ipsum dolor sit amet consectetur adipiscing elit, habitant sapien laoreet mi taciti in nunc semper, netus neque pulvinar aliquet diam convallis. Facilisi lacus felis integer sollicitudin luctus laoreet leo natoque, placerat sodales non porttitor accumsan arcu aliquet, sagittis risus potenti himenaeos dui inceptos aliquam. Sociosqu euismod in augue quisque at quis tempor facilisi ad, cubilia vivamus accumsan suspendisse venenatis sagittis class volutpat elementum, vestibulum lacus habitasse libero felis luctus consequat mattis.</div>
 
 
  <button id="expandbtn">Read more</button>

CSS

#portfolio { border: 1px solid red; overflow: hidden; height: 2.5em; }

.readmore { height: auto!important; }

JavaScript

$(document).ready(function(){
  $('button').click(function(){
    if($('#portfolio').hasClass("readmore")) {
      $('#expandbtn').html('Read more');
      $('#portfolio').removeClass("readmore");
    } else {
      $('#expandbtn').html('Read less');
      $('#portfolio').addClass("readmore");
    }
  });
});