Как показать скрытую часть текста по клику на кнопку (текст адаптивен)

Question

Как показать скрытую часть текста по клику на кнопку (текст адаптивен)

Рейтинг: 0Ответов: 1Опубликовано: 13.04.2023

у меня такой вопрос: Есть несколько одинаковых карточек, в которых часть текста скрыта. Нужно сделать так, чтобы при нажатии на кнопку "Показать всё" появлялся весь текст, и кнопка менялась на "скрыть", а при повторном нажатии - текст скрывался. Но при этом текст должен быть адаптивен, то есть при уменьшении ширины экрана количество текста тоже уменьшалось, при увеличении - соответственно увеличивалось, а то, что не помещается - скрывалось до нажатия на кнопку. Кнопка каждой карточки должна отвечать только за свой текст. Чтобы скрыть текст я использовала такие свойства для него:

-webkit-line-clamp: 5; (столько строчек видно изначально) -webkit-box-orient: vertical; overflow: hidden;

Буду благодарна за помощь с кодом Java Script.

javascript

Источник: Stack Overflow на русском

Answer 1

▲ -1Принят

Сделал, как смог. Вроде как то что вам нужно. К "line-clamp" не применяется плавная анимация, поэтому пришлось выстраивать открытие и закрытие от "max-height", а "line-clamp" меняю через jQuery с задержкой равной анимации "transition" в стилях.
Ну и получилось, что троеточие ставится сразу после анимации сворачивания окна. А изначальный "max-height" вам нужно выставить так, что бы нужное количество строк изначальных были видны.

$(document).ready(function () {
  $(".advantages__row").after("<div class='open-more__trigger'>Показать ещё</div>");
  
  $('.open-more__trigger').on('click', function () {
    let bodyDrop = $(this).prev('.advantages__row');
    bodyDrop.toggleClass('open');
    if (bodyDrop.hasClass('open')) {
      bodyDrop.css("-webkit-line-clamp", "100");
      $(this).text('Свернуть');
    } else {
      setTimeout(function() {
        bodyDrop.css("-webkit-line-clamp", "4");
      }, 800);
      $(this).text('Показать ещё');
    }
  });
});

.open-more__trigger {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 25px auto 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  color: #007CC1;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px dashed #007CC1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.open-more__trigger:hover {
  color: #0575BB;
  border-bottom: 2px dashed #0575BB;
}

.open-more__wrapper .advantages__row {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: initial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  max-height: 90px;
  transition: 1s;
}

.open-more__wrapper .advantages__row.open {
  // -webkit-line-clamp: 100;
  max-height: 800px;
  transition: 1s;
}

<div class="advantages__list flexbox open-more__wrapper">
    <div class="advantages__row">
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </div>
    <div class="advantages__row">
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </div>
    <div class="advantages__row">
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Как показать скрытую часть текста по клику на кнопку (текст адаптивен)

Ответы