JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<div class="text-block">
      <div class="block">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem lorem lorem</div>
      <button class="full">full</button>
      <button class="trancation">trancation</button>
    </div>
    <div class="text-block">
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat dignissimos vitae tempore eaque sapiente, placeat aliquam inventore dolores assumenda sint corrupti numquam, iste, fugiat rem cumque maxime. Molestias, impedit veritatis.</div>
      <button class="full">full</button>
      <button class="trancation">trancation</button>
    </div>

CSS

.block{
  max-width: 700px;
}
button{
  height: 30px;
  width: 100px;
}

JavaScript

const shortText = text => text.slice(0, 25) + "...";
const saveText = [];

const allTexts = document.querySelectorAll('.block');

allTexts.forEach(text => {
  saveText.push({
  fullText:  text.innerText,
  get shortText() {
    return shortText(this.fullText);
  }
  });
  const index = saveText.length -1;
  const btns = text.closest('.text-block').querySelectorAll('button');
  btns.forEach(btn => btn.dataset.id = index);
});

const btns = document.querySelectorAll('button');
btns.forEach(btn => {
  btn.addEventListener('click', (e)=>{
    const currentText = e.target.closest('.text-block').querySelector('.block');
    if(btn.classList.contains('full')){
      currentText.innerHTML = saveText[e.target.dataset.id].fullText;
    } else {
      currentText.innerHTML = saveText[e.target.dataset.id].shortText;
    }
  })
});