Показ обрезанного текста по кнопке в конце абзаца

Question

Есть скрипт, обрезающий текст и добавляющий кнопку его раскрытия в конце абзаца, все работает отлично на одном блоке, но не могу никак садаптировать на все блоки на странице. Рабочий скрипт на один блок:

let isHidden = true;
const desc = document.querySelector('.service_info_text');
const text = desc.innerHTML;

computeState();

function computeState() {
  if (isHidden) {
    desc.innerHTML = text.split("", 240)
      .join("")
      .toLowerCase()
      .padEnd(243, ".") + '<span class="text_hide">Показать весь</span>';
  } else {
    desc.innerHTML = text + '<span class="text_hide">Показать меньше</span>';
  }

  document.querySelector(".text_hide").addEventListener("click", () => {
    isHidden = !isHidden;
    computeState();
  });
}

Неудачная попытка адаптации:

let isHidden = true;
const desc = document.querySelectorAll('.service_info_text');

computeState();

function computeState() {
  for (let i = 0; i < desc.length; i++) {
    if (isHidden) {
      desc[i].innerHTML = desc[i].innerHTML.split("", 440)
        .join("")
        .toLowerCase()
        .padEnd(443, ".") + '<span class="text_hide">Показать весь</span>';
    } else {
      desc[i].innerHTML = desc[i].innerHTML + '<span class="text_hide">Показать меньше</span>';
    }}
    let hide = document.querySelectorAll(".text_hide");
    for (let i = 0; i < hide.length; i++){
      hide[i].addEventListener("click", () => {
        isHidden = !isHidden;
        computeState();
      });
    }
}

Answer 1

Можно привязать текст и показатель состояния к каждому элементу:

const descs = document.querySelectorAll('.service_info_text');

for (const desc of descs) {
  desc._isHidden = true;
  desc._text = desc.innerHTML;

  computeState(desc);
}

function computeState(desc) {
  if (desc._isHidden) {
    desc.innerHTML =
      desc._text.slice(0, 241).toLowerCase() +
      '... <span class="text_hide">Показать весь</span>';
  } else {
    desc.innerHTML =
      desc._text +
      ' <span class="text_hide">Показать меньше</span>';
  }

  desc.querySelector('.text_hide').addEventListener('click', () => {
    desc._isHidden = !desc._isHidden;
    computeState(desc);
  });
}

<div class="service_info_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr>
<div class="service_info_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

БЛОГ НА HUSL

Показ обрезанного текста по кнопке в конце абзаца

Ответы (1 шт):