Как развернуть текст через скрипт на JS?

Question

[greedy_wizard]

Помогите написать скрипт js
Есть параграф текста, который нужно ограничить до 200 символов
в конце данного текста ссылка "Развернуть" по клику на который открывается полная версия данного текста, то есть продолжение текста после 200 символа
Ссылка "Свернуть" не нужна!
Точно так как это сделано в фейсбук

<p id="shortText">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.
    <a href="#" id="expandLink" onclick="expandText()">Развернуть</a>
  </p>

  <script>
    function expandText() {
      var shortText = document.getElementById('shortText');
      var expandLink = document.getElementById('expandLink');

      var fullText = shortText.textContent;
      if (fullText.length > 200) {
        var truncatedText = fullText.substring(0, 200);
        var remainingText = fullText.substring(200);
        shortText.innerHTML = truncatedText + '<span id="extraText">' + remainingText + '</span>';
        expandLink.style.display = 'none';
      }
    }
  </script>

Answer 1

[Taulan Khatuaev]

<p id="shortText">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec mi eget nisi rhoncus efficitur sit amet at quam. Cras non venenatis ipsum, in dictum libero. Aenean gravida tristique ultrices.
  <a href="#" id="expandLink" onclick="expandText()">Развернуть</a>
</p>

<script>
  function expandText() {
    var shortText = document.getElementById('shortText');
    var expandLink = document.getElementById('expandLink');

    var fullText = shortText.textContent;
    if (fullText.length > 200) {
      var truncatedText = fullText.substring(0, 200);
      var remainingText = fullText.substring(200);

      // Создаем новый элемент <span> для скрытого текста
      var extraTextElement = document.createElement('span');
      extraTextElement.textContent = remainingText;
      extraTextElement.style.display = 'none'; // Скрываем его изначально

      // Добавляем скрытый текст после оригинального параграфа
      shortText.appendChild(extraTextElement);

      // Переключаем текст ссылки и показываем/скрываем дополнительный текст при клике
      expandLink.textContent = 'Свернуть';
      expandLink.onclick = function() {
        extraTextElement.style.display = extraTextElement.style.display === 'none' ? 'inline' : 'none';
        expandLink.textContent = extraTextElement.style.display === 'none' ? 'Развернуть' : 'Свернуть';
      };

      // Отображаем ссылку только если есть скрытый текст
      if (remainingText.trim() !== '') {
        expandLink.style.display = 'inline';
      } else {
        expandLink.style.display = 'none';
      }
    }
  }
</script>

Comments

[greedy_wizard]

Спасибо но это работает не верно
Линк "Свернуть" не нужен

https://codepen.io/agds/pen/gOQKxWX