Свернуть\Развернуть часть описания категории.. (помогите адаптировать)

[MixX]

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

Есть код, который собственно добавляется в category.tpl, он как я понимаю для старой версии OC, помогите адаптировать под 2.0.x.....чтот ничего не получается у меня, и div свой подставлял....фигня какая-то

<!--свернуть описание для категорий -->
<script type="text/javascript"><!--
 
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 135) {
 
$(".category-info").after('<div id="obexpand" class="obertka"><button class="expand" type="button" id="expand"><span class="">Развернуть </span></button></div>');
$(".category-info").after('<div id="obhide" class="obertka" style="display:none;"><button class="expand" type="button" id="hide"><span class="">Свернуть </span></button></div>');
$('.category-info').append("<div class='hide'></div>");
};
 
});
 
$('#expand').live('click',function(){
$('#obexpand').css("display", "none");
$('.category-info').animate({height: $('.category-info')[0].scrollHeight}, 600);
$('#obhide').css("display", "block");
$('.hide').css("display", "none");
 
});
 
$('#hide').live('click',function(){
$('#obhide').css("display", "none");
$('.category-info').animate({height: 120}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");
 
});
 
//--></script>
 
<style type="text/css">
.category-info {
position:relative;
height: 120px;
overflow: hidden;}
 
.hide {
position:absolute;
top:80px;
width:100%;
height:50px;
background: url('/catalog/view/theme/default/image/hide.png') repeat-x;
}
 
.obertka {
width: 100%;
text-align: center;
border-bottom: #ccc solid 1px;
height: 8px;
margin:0 auto;
margin-bottom: 20px;
}
.expand {
height: 18px;
padding: 0 .9em;
border-width: 1px;
border-style: solid;
outline: 0;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background:white;}
 
.expand:hover {
border:#ccc solid 1px;
background:#eee;
 
}
</style>
<!--свернуть описание для категорий -->

[Shagrath]

От версии opencart работоспособность таких (js/jquery) скриптов практически не зависит. Работают они на стороне клиента (в браузере) и зависят только от кода который загружен на страницу. Что бы можно было посмотреть что не работает или как адаптировать данный скрипт под ваш шаблон, нужно хотя бы увидеть сам шаблон.