Кнопка "читать еще"

[Valery332]

Добрый день. Как сделать что-бы ели описание категории более 150 символов появлялась кнопка, "читать еще" которая разворачивала бы полное описание. 

[legioner26]

2 минуты назад, Valery332 сказал:

Добрый день. Как сделать что-бы ели описание категории более 150 символов появлялась кнопка, "читать еще" которая разворачивала бы полное описание. 

Я как то делал модификатор.

[Valery332]

12 minutes ago, legioner26 said:

Я как то делал модификатор.

Можете поделится?

[legioner26]

12 минут назад, Valery332 сказал:

Можете поделится?

Надо поискать если остался.

[Valery332]

On 10/11/2020 at 6:12 PM, legioner26 said:

Надо поискать если остался.

Хелп плззз))

[Blast]

@Valery332

в catalog/view/theme/ваш_шаблон/template/product/product.twig меняем

<div class="tab-pane active" id="tab-description">{{ description }}</div>

на

<div class="tab-pane active collapsed" id="tab-description"><div>{{ description }}</div><a href="#" id="show-more-description" data-reverse="hide">show more</a></div>

и добавляем скрипт

<script>
$('#show-more-description').on('click', function(e){
  e.preventDefault();
  if ($('#tab-description').hasClass('collapsed')) {
    $('#tab-description').css('height',
      $('#tab-description > div').height() + 40 + 'px'
    );
  } else {
    $('#tab-description').css('height', '');    
  }
  $('#tab-description').toggleClass('collapsed');
  let label = $(this).data('reverse');
  $(this).data('reverse', $(this).html());
  $(this).html(label);

});
</script>

в ксс

#show-more-description {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    font-size: 16px;
    color: #2177c8;
    line-height: 21px;
    box-shadow: -11px 0 7px #fff;
}
#tab-description {
    position: relative;
	transition: height 0.3s ease-in 0s;
	overflow: hidden;
}
#tab-description.collapsed {
    height: 200px;    
}

селекторы, размеры и цвет поправить, адаптируя к шаблону

Змінено 13 жовтня 2020 користувачем Blast