catalog\view\theme\шаблон\template\product\category.tpl
перед
<?php echo $footer; ?>
добавить
<script type="text/javascript"><!--
$(document).ready(function() {
if ($('.category-info')[0].scrollHeight > 165) {
$(".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: 165}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");
});
//--></script>
<style type="text/css">
.category-info {
position:relative;
height: 165px;
overflow: hidden;}
.hide {
position:absolute;
top:115px;
width:100%;
height:50px;
background: url("catalog/view/theme/default/image/hide.png") repeat-x transparent;
}
.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>