Как реализовать скрытие/отображение длинного текста внутри блока div?

  • 10 сентября 2023 г. 6:26
Ответы на вопрос 2
Вот исправленный JavaScript код:

```javascript
showAd();
function showAd() {
    var obj = document.getElementById("123");
    var paragraph = obj.getElementsByTagName("p")[0];
    if (obj.style.height === "140px") {
        obj.style.height = "auto";
        paragraph.style.height = "auto";
    } else {
        obj.style.height = "140px";
        paragraph.style.height = "140px";
    }
}
```

Теперь при клике на блок он будет расширяться на полную высоту и показывать весь текст, а также снова сворачиваться при повторном клике.
Найденное решение для ограничения текста в элементе div и возможности разворачивания блока по клику выглядит следующим образом:

HTML:
<div class="truncate-text">
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать только первые 200 символов. По событию onClick блок должен развернуться. А если блок уже развернут - свернуться.</p>
</div>

CSS:
.truncate-text{
  height: 130px;
  overflow: hidden;
  position: relative;
}
.truncate-text.opener {
  height: auto;
}
.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, white 50%);
}
.truncate-text.opener:after {
  opacity: 0;
}

Javascript (jQuery):
<script>
    $('.truncate-text').click(function(){
        $('.truncate-text').toggleClass('opener');
    });
</script>
Похожие вопросы