Скрываем часть текста при помощи CSS и HTML (сворачивается и разворачивается)

Необходимо добавить функционал для блока с контентом, который по умолчанию будет скрывать часть контента. При нажатии на текст «Развернуть», контент должен полностью раскрываться, а текст должен измениться на «Свернуть». Когда пользователь снова нажимает на «Свернуть», контент должен частично скрываться.

Такой функционал может быть полезен, например, в каталоге товаров для отображения меток фильтрации товаров. Или на странице статьи или главной странице для скрытия части текста.

Общее описание

Для того чтобы скрыть содержимое под кат, можно использовать только HTML и CSS. Для этого необходимо обернуть соответствующий контент в тег div и присвоить ему уникальный класс. Затем перед обернутым контентом следует добавить элемент input с типом «checkbox», а в конце контента — пустой div с еще одним уникальным классом. Наконец, после обернутого контента следует добавить тег label. Приведенные ниже — примеры HTML и CSS кода, которые следует использовать.

HTML — код

<input type="checkbox" class="read-more-checker" id="read-more-checker" />
<div class="limiter">
<!-- Здесь сам контент который должен будет скрываться / раскрываться -->
 <div class="bottom"></div>
</div>
<label for="read-more-checker" class="read-more-button"></label>

CSS — код

/* Стили для текстового поля с кнопкой "Далее" */
.limiter {
  max-height: 100px;
  overflow: hidden;
  position: relative;
}
.limiter .bottom {
  position: absolute; /* Если прыгает - можно попробовать sticky */
  bottom: 0;
  background: linear-gradient(#e66465, #9198e5); /*тут цвета меняйте на которые вам надо или же  закоментируйте все строки.*/
  width: 100%;
  height: 60px;
  opacity: 1;
  transition: 0.3s;
}
.read-more-checker {
  opacity: 0;
  position: absolute;
}
.read-more-checker:checked ~ .limiter {
  max-height: none;
}
.read-more-checker:checked ~ .limiter .bottom {
  opacity: 0;
  transition: 0.3s;
}
.read-more-checker ~ .read-more-button:before {
  content: "Развернуть »";
}
.read-more-checker:checked ~ .read-more-button:before {
  content: "Свернуть «";
}
.read-more-button {
  cursor: pointer;
  display: inline-block;
  color: #777;
  text-decoration: underline;
}

Надеюсь данная статья вам помогла, если есть вопросы, пишите.