JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div>
  <p class="total-length">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aliquid laudantium eveniet officiis dolorum magnam possimus libero vero non nam, culpa, ex repellat odit facere quisquam quidem animi quibusdam optio? Lorem ipsum dolor <span class="hide-show hide-show-tim1"> sit amet consectetur adipisicing elit. Quia, at dolorum consectetur accusantium similique necessitatibus nihil amet reprehenderit rem nostrum adipisci perspiciatis dolores dignissimos, dolore voluptates quaerat fuga nam inventore.
</span>
 </p>
                
              <!-- minta tolong trigger klik nya dibuat dinamis -->
          <div class="showHideTim1">
             <div class="bbb-button--toggle content-tim">Lihat lebih</div>
            </div>
         </div>
         
         
         <div>
  <p class="total-length">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aliquid laudantium eveniet officiis dolorum magnam possimus libero vero non nam, culpa, ex repellat odit facere quisquam quidem animi quibusdam optio? Lorem ipsum dolor <span class="hide-show hide-show-tim1"> sit amet consectetur adipisicing elit. Quia, at dolorum consectetur accusantium similique necessitatibus nihil amet reprehenderit rem nostrum adipisci perspiciatis dolores dignissimos, dolore voluptates quaerat fuga nam inventore.
</span>
 </p>
                
              <!-- minta tolong trigger klik nya dibuat dinamis -->
          <div class="showHideTim1">
             <div class="bbb-button--toggle content-tim">Lihat lebih</div>
            </div>
         </div>

CSS

.hide-show {
  display:none
}

.content-tim {
  cursor: pointer;
  color:red;
}

JavaScript

$('.showHideTim1').on('click', function () {
        $(this).prev().children().slideToggle();
    $('.content-tim', this).text(function (_, text) {
        $(this).toggleClass('rotate');
        return text === 'Tutup' ? 'Lihat lebih' : 'Tutup';
    })
 });