Скрытие длинного текста в описание категории

[Nameless]

Всем привет! Решил сделать основательное описание для основных категорий и тк текст очень длинный то визуально это не удобно. Для решения проблемы нашел такой скрипт http://cssdeck.com/labs/full/uq6hvxxy

Запихал в stylesheet.css:

#block-hidetext{
    border-bottom: 1px solid #C3C3C3;
    height: 200px;
    overflow: hidden;
}
  
 
#text-tab{
    position: absolute;
    width: 120px;
    height: 30px;
    border-top: 1px solid #C3C3C3;
    border-left: 1px solid #C3C3C3;
    border-right: 1px solid #C3C3C3;
    background-color: white;
    margin-top: -31px;
    margin-left: 290px; 
    cursor: pointer;  
}
#text-tab p{
    text-align: center;
    margin: 8px 0;  
}

создал файл blockhidetext.js в catalog/view/javascript/ с таким содержанием:

$(document).ready(function(){

 var sizetext = $('#size-hidetext').height()+35; // Определяем высоту блока с текстом. Фактически определяем высоту текста и прибавляем ещё 35px - это высота ярлычка, чтобы при открытом состоянии ярлычок не заходил на текст.'

  $('#text-tab').toggle(
       function() {
            $('#block-hidetext').animate({'height':sizetext},350); // Плавная анимация к концу блока с текстом.
            $('#text-tab > p').html("Скрыть");
       },
       function() {
            $('#block-hidetext').animate({'height':'200'},350); // По второму нажатию на ярлычок будет происходить анимация вверх до 200px.
            $('#text-tab > p').html("Раскрыть");
       }
    );	

      });

подключил его в хедере: <script src="catalog/view/javascript/blockhidetext.js" type="text/javascript"></script>

 

Добавил в category.tpl в выводе описания вот так:

<div class="col-sm-10"><div id="block-hidetext"><div id="size-hidetext"><?php echo $description; ?><div id="text-tab" ></div></div><p>Раскрыть</p></div></div>

Но на выходи получил все равно вот такую не работающию хрень: http://prntscr.com/bmwx9x 

[IOO]

Не помню с какого источника брал, но вот гайд:

Подключаем в хедере, если не подключено:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Добавляем в футер сам скрипт:

<script language="javascript">
$(document).ready(function(){
$("#allother").hide();
$("#moreless").click(function(e) {
var allother = $("#allother");
$(this).text(allother.is(":visible") ? "Развернуть »" : "« Свернуть");
allother.slideToggle();
e.stopImmediatePropagation();
return false;
});
});
</script>

Теперь в описании категории редактируем код:

<div id="first4">
<p>Текст который человек видит сразу</p>
</div>
<div id="allother">
<p>Текст который появляется после нажатия на кнопку: Развернуть</p>
</div>
<a href="#" id="moreless">Развернуть »</a>

Правда это ручной вариант, если подойдет.

[Nameless]

Сделал чуть проще как тут описано http://pcvector.net/2014/11/24/readmorejs-plagin-skryvayuschiy-bolshoy-tekst.html

Для чего залил readmore.js в catalog/view/javascript, далее в category.tpl после 

<?php echo $column_right; ?></div>

добавил:

<script src="catalog/view/javascript/readmore.js" type="text/javascript"></script>
	<script>
		$('article').readmore({
			maxHeight: 100,
			moreLink: '<a href="#" class="button btn btn-primary">Подробнее</a>',
			lessLink: '<a href="#" class="button btn btn-primary">Скрыть</a>'
		});
	</script>

а текст в описании категории заключил в <article></article>, хотя последние теги может правильней добавить в шаблон

[Nameless]

если стоит МегаФильтр то нужно в настройках слоя фильтра зайти в яваскрипт и дописать в последней констркции кода:

$('article').readmore({
			maxHeight: 100,
			moreLink: '<a href="#" class="button btn btn-primary">Подробнее</a>',
			lessLink: '<a href="#" class="button btn btn-primary">Скрыть</a>'
		});

что бы вышло:

MegaFilter.prototype.afterRender = function( htmlResponse, htmlContent, json ) {
$('article').readmore({
			maxHeight: 100,
			moreLink: '<a href="#" class="button btn btn-primary">Подробнее</a>',
			lessLink: '<a href="#" class="button btn btn-primary">Скрыть</a>'
		});
};