JSFiddle - React, Tailwind, and code Playground

by Hassen Charef

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class='expandable' onclick='expand()'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero ex, vehicula id egestas sed, iaculis vel enim. Curabitur interdum sollicitudin turpis, sit amet semper magna rutrum pharetra. Donec blandit, enim at volutpat feugiat, nunc orci placerat nunc, eu placerat tortor libero nec est. Aliquam erat volutpat. Ut dapibus tellus metus, a lacinia risus gravida quis. Nullam placerat maximus risus ut tristique. Mauris rhoncus sagittis erat, eget mollis ligula. Nulla accumsan fermentum dictum.

  Curabitur quis condimentum ligula, at viverra ante. Vestibulum pretium at libero eu cursus. Integer sit amet ultrices lacus, ac cursus eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras maximus nec sem non ultricies. Fusce et sem volutpat, semper mauris ut, rhoncus enim. Donec commodo libero sed tristique placerat. Cras metus lacus, fermentum vitae blandit feugiat, dapibus non tellus. Nunc lacinia, nisi sed molestie mattis, leo justo maximus orci, at ultrices nunc leo eget risus. Morbi aliquam a nisi in ullamcorper. Duis ultrices mauris at nunc iaculis, sed consequat tortor cursus. Sed rutrum, metus ut accumsan blandit, purus dolor congue turpis, sit amet viverra nisl lacus id augue. Fusce iaculis bibendum mollis. Nullam ac viverra tellus, eu cursus dolor. Cras nunc ipsum, posuere laoreet consectetur quis, luctus dignissim lacus.

  Nunc et magna et libero congue luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras venenatis, libero eu varius iaculis, diam nisl facilisis mauris, sit amet iaculis tortor dolor vel nisl. Ut aliquet dignissim purus, vitae lobortis diam tempus vel. Aliquam malesuada urna sed ligula sollicitudin vestibulum. Sed id lobortis eros. Aenean quam...

CSS

.expandable {
  font-size: 12px;
  height: 15px;
  overflow: hidden;
}

JavaScript

var expand = () => {
  $('.expandable').css('height', $('.expandable').height() + 14);
}