Нашел: Вот кому надо , это все схоже шаблоны все по сути одинаковые и представление в них тоже )
В файле public_html/catalog/view/javascript/at/custom.js функция
$(".show-more").click(function () {
if($(".text").hasClass("show-more-height")) {
$(this).html('Show Less <i class="fa fa-angle-up"></i>');
} else {
$(this).html('Show More <i class="fa fa-angle-down"></i>');
}
$(".text").toggleClass("show-more-height");
});
В файле шаблона public_html/catalog/view/theme/glory01/template/product/product.twig слои которые окутывают наше описание
<div class="tab-pane active" id="tab-description">
<div class="text show-more-height">{{ description }}</div>
<div class="show-more"> Показать еще <i class="fa fa-angle-down"></i></div>
</div>
В файле стилей описывается все положения градиенты и т.д
public_html/catalog/view/theme/glory01/stylesheet
#tab-description {
position:relative;
}
#tab-description .text {
margin-bottom: 5px;
padding: 0 15px;
position:relative;
display: block;
}
#tab-description .show-more {
position: relative;
font-size: 14px;
padding-top: 10px;
height: 40px;
text-align: center;
cursor: pointer;
width: 200px;
margin: 0px auto;
text-transform: uppercase;
font-weight: 400;
}
#tab-description .show-more:hover {
color: #333;
}
#tab-description .show-more-height:before{
display: block;
content: "";
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
z-index: 2;
background: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%,#fff);
}
#tab-description .show-more-height {
height: 100px;
overflow:hidden;
}
