Как скрыть часть текста и показать кнопку «Показать еще»

Сегодня мы с вами разберём готовый скрипт на Jquery, который скрывает часть текста описания, а под ним добавляет кнопку «Показать еще»

	
	// Объявляем переменные
 	var description = $('.description'); // Это jQuery селектор, который ищет все элементы на странице с классом "description"
 	var text = description.text().trim(); // Это метод JavaScript, который удаляет пробелы в начале и в конце строки

	// Если текст больше 300 символов
	if (text.length > 300) {
		
		// Создаем кнопку
		var button = $('<button class="btn btn-primary"><i class="fa fa-eye"></i> Показать ещё</button>');

		// Добавляем кнопку после элемента "description"
		description.after(button);

		// Добавляем элементу description класс active
		description.addClass('active');

		// Добавляем обработчик события клика на кнопку
		button.on('click', function() { // Функция нажатия на кнопку
			description.removeClass('active'); // Удаления класса active у блока description
			button.hide(); // Скрываем кнопку
		});
	}

1. Откройте файл по пути catalog/view/theme/default/template/product/category.twig

2. Найдите вот такой код

<div class="col-sm-10">{{ description }}</div>

3. Добавьте ему класс description

<div class="col-sm-10 description">{{ description }}</div>

4. Сохранитесь

1. Откройте файл по пути catalog/view/javascript/common.js

2. Найдите вот такой код

$(document).ready(function () {

3. После него добавьте наш скрипт Jquery

4. Сохранитесь

1. Откройте файл по пути catalog/view/theme/default/stylesheet/stylesheet.css

2. В самом низу добавьте вот такой код

.description.active {
    max-height: 150px;
    overflow: hidden;
    position: relative;
}

.description.active:after {
    content: "";
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}