[РЕШЕНО] Спойлер описания как сделать?

sobwoofer · 18 сентября, 2013

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

Спойлер реализован тут.

кто подскажет как его сделать?

sobwoofer · 19 сентября, 2013

Ребят что на самом деле все так плохо со спойлерами??

Pascha · 19 сентября, 2013

что Вам мешает в код описания вставить простейший скрипт спойлера?
тут реализовал где только можно)))) и не только в описании)))
http://aqva-mania.ru
реализацию можно взять хоть откуда, например вот: http://pcvector.net/scripts/accordion/284-spoyler-spoiler.html

sobwoofer · 20 сентября, 2013

что Вам мешает в код описания вставить простейший скрипт спойлера?

тут реализовал где только можно)))) и не только в описании)))

http://aqva-mania.ru

реализацию можно взять хоть откуда, например вот: http://pcvector.net/scripts/accordion/284-spoyler-spoiler.html

его можно вставить непосредственно в тпл? или только сюда

Pascha · 20 сентября, 2013

1. тпл хидер подключаете скрипт спойлера

2. если хотите скрыть под спойлер часть текста (как на примере) вводите код спойлера непосредственно в описание
3. если захотите скрывать весь текст описания под спойлер то можно внести в каталог тпл обернув в спойлер вывод дискрипшн

sobwoofer · 21 сентября, 2013

извините еще раз..

сделал все как было описано вами и авторами статьи:

кинул в хедер это

<script>
	 $(".box .block").show();
            $(".closed .block").hide();

            $("div.hide").click(function(){
                $(this).toggleClass("show").next().slideToggle("medium");
            });
</script>

В категори.типл кинул это

<div class="box">    
					<h2> Toggle (переключатель) <span class="l"></span><span class="r"></span> </h2>    
					<div class="hide"><span class="s">Show</span><span class="h">Hide</span></div>       
					<div class="block">                   
					<div class="block_in">
				Контент 1
	 </div>         
	</div>           
	</div>

в стайлшит кинул это

.box {     background:#fff;     margin-bottom:20px;     padding:0;     position: relative;     overflow: hidden;     border: 1px solid #ccc;     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;     -webkit-box-shadow:0 0 10px #DCDCDC inset;     -moz-box-shadow:0 0 10px #DCDCDC inset;     box-shadow:0 0 10px #DCDCDC inset; } .box h2 {     font-size:1em;     font-weight:700;     text-transform:uppercase;     color:#444;     background: #ddd;     margin:0 -10px -1px -10px;     padding:12px;     padding-left: 15px;     padding-right: 45px;     -webkit-box-shadow:0 0 10px #DCDCDC inset;     -moz-box-shadow:0 0 10px #DCDCDC inset;     box-shadow:0 0 10px #DCDCDC inset;     border-radius: 5px 5px 0 0;     -moz-border-radius: 5px 5px 0 0;     -webkit-border-radius: 5px 5px 0 0; } .block {     padding:0; } .block_in {     padding:12px; } .box div.hide { display: block; width: 40px; line-height: 24px; position: absolute; right: 5px; top: 8px; cursor: pointer; font-size: 10px; text-transform: uppercase; text-align: center; border: solid 1px #aaa; background: #f5f5f5; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:0 0 4px #DCDCDC inset; -moz-box-shadow:0 0 4px #DCDCDC inset; box-shadow:0 0 4px #DCDCDC inset; } .box div.hide:hover { background: #fff; } .box div.hide span.h {    display: block;} .box div.hide span.s {    display: none;} .box div.show  span.h {    display: none;} .box div.show  span.s {    display: block;} .closed div.hide span.h {    display: none;} .closed div.hide span.s {    display: block;} .closed div.show  span.h {    display: block;} .closed div.show  span.s {    display: none;}

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

Скриншот:

Tom · 21 сентября, 2013

В приведённом примере с категориями использован скрипт

.

<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>

Не особо в этом силён,но как я понимаю вот это в скрипте и указывает с чем ему работать

$(".category-info")

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

$(".div-какой то")

.

Tom · 21 сентября, 2013

Вобщем нашёл способ

Создаём дивчик

<div class="tab-div">  
.................
 </div>

внутрь запихиваем весь кусок табов

  <div id="tabs" class="htabs"><a href="#tab-description"><?php echo $tab_description; ?></a>

.............

        <a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a></div>
      <?php } ?>
    </div>

перед

<?php echo $footer; ?>

вставляем

<!--свёрнутое описание для табов товара -->
<script type="text/javascript"><!--


$(document).ready(function() {
if ($('.tab-div')[0].scrollHeight > 135) {


$(".tab-div").after('<div id="obexpand" class="obertka"><button class="expand" type="button" id="expand"><span class="">Развернуть </span></button></div>');
$(".tab-div").after('<div id="obhide" class="obertka" style="display:none;"><button class="expand" type="button" id="hide"><span class="">Свернуть </span></button></div>');
$('.tab-div').append("<div class='hide'></div>");
};


});


$('#expand').live('click',function(){
$('#obexpand').css("display", "none");
$('.tab-div').animate({height: $('.tab-div')[0].scrollHeight}, 600);
$('#obhide').css("display", "block");
$('.hide').css("display", "none");


});


$('#hide').live('click',function(){
$('#obhide').css("display", "none");
$('.tab-div').animate({height: 120}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");


});


//--></script>


<style type="text/css">
.tab-div {
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>
<!--свёрнутое описание для табов товара -->

Не забываем про картинку

http://avtomag.cc/catalog/view/theme/default/image/hide.png

sobwoofer · 23 сентября, 2013

Получилось. спасибо большое!

multimen · 29 января, 2014

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

Freelab · 14 марта, 2014

А у нас же был модуль такой на форуме, его удалили что ли?

Tom · 15 марта, 2014

Давно удалён.

kos0760 · 17 марта, 2014

Сделал для своего сайта данную фишку. Применил только для дескрипшина:

 <div id="tab-div">
  <div id="tab-description" class="tab-content"><?php echo $description; ?></div>
  </div>

Все получилось отлично:

Но когда я перехожу на вкладку "Характеристики", снизу появляется то, что на скриншоте:

Это вообще реально убрать? Потому что я так понял, если высота описания выше определенного значения, то появляется спойлер не только в описании, но и во всех табах. А хотелось бы, чтобы только для описания применялось данное правило.

Вот кусок кода, если нужно:

<div id="tabs" class="htabs">
    <?php if ($description) { ?>
    <a href="#tab-description"><?php echo $tab_description; ?></a>
    <?php } ?>
    <?php if ($attribute_groups) { ?>
    <a href="#tab-attribute"><?php echo $tab_attribute; ?></a>
    <?php } ?>
    <?php if ($review_status) { ?>
    <a href="#tab-review"><?php echo $tab_review; ?></a>
    <?php } ?>
    <?php if ($products) { ?>
    <a href="#tab-related"><?php echo $tab_related; ?> </a>
    <?php } ?>
  </div>
 
  
  <?php if ($attribute_groups) { ?>
  <div id="tab-attribute" class="tab-content">
    <table class="attribute">
      <?php foreach ($attribute_groups as $attribute_group) { ?>
      <thead>
        <tr>
          <td colspan="2"><?php echo $attribute_group['name']; ?></td>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
        <tr>
          <td><?php echo $attribute['name']; ?></td>
          <td><?php echo $attribute['text']; ?></td>
        </tr>
        <?php } ?>
      </tbody>
      <?php } ?>
    </table>
  </div>
  <?php } ?>  
  
  <?php if ($description) { ?>
     <div id="tab-div">
  <div id="tab-description" class="tab-content"><?php echo $description; ?></div>
  </div>
    <?php } ?>  
  
  <?php if ($review_status) { ?>
  <div id="tab-review" class="tab-content">
    <div id="review"></div>
    <h2 id="review-title"><?php echo $text_write; ?></h2>
    <b><?php echo $entry_name; ?></b><br />
    <input type="text" name="name" value="" />
    <br />
    <br />
    <b><?php echo $entry_review; ?></b>
    <textarea name="text" cols="40" rows="8" style="width: 98%;"></textarea>
    <span style="font-size: 11px;"><?php echo $text_note; ?></span><br />
    <br />
    <b><?php echo $entry_rating; ?></b> <span><?php echo $entry_bad; ?></span> 
    <input type="radio" name="rating" value="1" />
     
    <input type="radio" name="rating" value="2" />
     
    <input type="radio" name="rating" value="3" />
     
    <input type="radio" name="rating" value="4" />
     
    <input type="radio" name="rating" value="5" />
     <span><?php echo $entry_good; ?></span><br />
    <br />
    <b><?php echo $entry_captcha; ?></b><br />
    <input type="text" name="captcha" value="" />
    <br />
    <img src="index.php?route=product/product/captcha" alt="" id="captcha" /><br />
    <br />
    <div class="buttons">
      <div class="right"><a id="button-review" class="button"><?php echo $button_continue; ?></a></div>
    </div>
  </div>
  <?php } ?>
  <?php if ($products) { ?>
  <div id="tab-related" class="tab-content2">
    <div class="box-product3">
      <?php foreach ($products as $product) { ?>
      <div>
        <?php if ($product['thumb']) { ?>
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
        <div id="image-shadow">
      </div>
        <?php } ?>
        <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
        <?php if ($product['price']) { ?>
        <div class="price">
          <?php if (!$product['special']) { ?>
          <?php echo $product['price']; ?>
          <?php } else { ?>
          <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
          <?php } ?>
        </div>
        <?php } ?>
        <?php if ($product['rating']) { ?>
        <div class="rating"><img src="catalog/view/theme/and_sport/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
        <?php } ?>
        <div class="cart">
       
        <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
        </div></div>
      <?php } ?>
    </div>
 
   </div>
 
  <?php } ?>
 <!-- <?php if ($tags) { ?>
  <div class="tags"><b><?php echo $text_tags; ?></b>
    <?php for ($i = 0; $i < count($tags); $i++) { ?>
    <?php if ($i < (count($tags) - 1)) { ?>
    <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>,
    <?php } else { ?>
    <a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
    <?php } ?>
    <?php } ?>
  </div>
  <?php } ?>-->
  <?php echo $content_bottom; ?></div>
<script type="text/javascript"><!--
$('.colorbox').colorbox({
	overlayClose: true,
	opacity: 0.5
});
//--></script> 
<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
		dataType: 'json',
		success: function(json) {
			$('.success, .warning, .attention, information, .error').remove();
			
			if (json['error']) {
				if (json['error']['option']) {
					for (i in json['error']['option']) {
						$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
					}
				}
			} 
			
			if (json['success']) {
				$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/and_sport/image/close.png" alt="" class="close" /></div>');
					
				$('.success').fadeIn('slow');
				setTimeout ("$('.success').fadeOut('slow');", 2000);	
				$('#cart-total').html(json['total']);
				
				 
			}	
		}
	});
});
//--></script>
<?php if ($options) { ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/ajaxupload.js"></script>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
	action: 'index.php?route=product/product/upload',
	name: 'file',
	autoSubmit: true,
	responseType: 'json',
	onSubmit: function(file, extension) {
		$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/and_sport/image/loading.gif" class="loading" style="padding-left: 5px;" />');
		$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
	},
	onComplete: function(file, json) {
		$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);
		
		$('.error').remove();
		
		if (json['success']) {
			alert(json['success']);
			
			$('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
		}
		
		if (json['error']) {
			$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
		}
		
		$('.loading').remove();	
	}
});
//--></script>
<?php } ?>
<?php } ?>
<?php } ?>
<script type="text/javascript"><!--
$('#review .pagination a').live('click', function() {
	$('#review').fadeOut('slow');
		
	$('#review').load(this.href);
	
	$('#review').fadeIn('slow');
	
	return false;
});			

$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');

$('#button-review').bind('click', function() {
	$.ajax({
		url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
		type: 'post',
		dataType: 'json',
		data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),
		beforeSend: function() {
			$('.success, .warning').remove();
			$('#button-review').attr('disabled', true);
			$('#review-title').after('<div class="attention"><img src="catalog/view/theme/and_sport/image/loading.gif" alt="" /> <?php echo $text_wait; ?></div>');
		},
		complete: function() {
			$('#button-review').attr('disabled', false);
			$('.attention').remove();
		},
		success: function(data) {
			if (data['error']) {
				$('#review-title').after('<div class="warning">' + data['error'] + '</div>');
			}
			
			if (data['success']) {
				$('#review-title').after('<div class="success">' + data['success'] + '</div>');
								
				$('input[name=\'name\']').val('');
				$('textarea[name=\'text\']').val('');
				$('input[name=\'rating\']:checked').attr('checked', '');
				$('input[name=\'captcha\']').val('');
			}
		}
	});
});
//--></script> 
<script type="text/javascript"><!--
$('#tabs a').tabs();
//--></script> 
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script> 
<script type="text/javascript"><!--
if ($.browser.msie && $.browser.version == 6) {
	$('.date, .datetime, .time').bgIframe();
}

$('.date').datepicker({dateFormat: 'yy-mm-dd'});
$('.datetime').datetimepicker({
	dateFormat: 'yy-mm-dd',
	timeFormat: 'h:m'
});
$('.time').timepicker({timeFormat: 'h:m'});
//--></script> 

<!--свёрнутое описание для табов товара -->

<script type="text/javascript"><!--

$(document).ready(function() {
if ($('#tab-div')[0].scrollHeight > 195) {


$("#tab-div").after('<div id="obexpand" class="obertka"><button class="expand" type="button" id="expand"><span style="font-size:16px;">Полное описание</span></button></div>');
$("#tab-div").after('<div id="obhide" class="obertka" style="display:none;"><button class="expand" type="button" id="hide"><span style="font-size:16px;">Свернуть </span></button></div>');
$('#tab-div').append("<div class='hide'></div><div class='hide2'></div>");
};


});


$('#expand').live('click',function(){
$('#obexpand').css("display", "none");
$('#tab-div').animate({height: $('#tab-div')[0].scrollHeight}, 600);
$('#obhide').css("display", "block");
$('.hide').css("display", "none");


});


$('#hide').live('click',function(){
$('#obhide').css("display", "none");
$('#tab-div').animate({height: 165}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");


});


//--></script>


<style type="text/css">
#tab-div {
position:relative;
min-height: 50px;
height: 165px;
overflow: hidden;
margin-left: 10px;
margin-right: 10px;
}


.hide {
position:absolute;
top:105px;
width:100%;
height:70px;
background: url('/catalog/view/theme/and_sport/image/hide.png') no-repeat;
}

.hide2 {
position:absolute;
top:105px;
width:100%;
height:70px;
background: url('/catalog/view/theme/and_sport/image/hide3.png') no-repeat;
left: 99.89%;
}


.obertka {
width: 100%;
text-align: center;
height: 8px;
margin-bottom: 30px;
margin-top: -30px;
position: relative;
}
.expand {
height: 22px;
padding: 0 .9em;
border-width: 1px;
border-style: solid;
border-color: #ccc;
outline: 0;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background:white;}


.expand:hover {
border:#ccc solid 1px;
background:#eee;


}
</style>

<!--свёрнутое описание для табов товара -->


<?php echo $footer; ?>

kos0760 · 18 марта, 2014

Решил данную проблему с помощью CSS.

Ukon · 21 октября, 2014

Получилось. спасибо большое!

День добрый, не могли бы вы помочь реализовать мне спойлеры на моем сайте?

Tom · 21 октября, 2014

А описание выше не помогло?

Ukon · 21 октября, 2014

А описание выше не помогло?

Плохо в этом разбираюсь. хз куда файлы jjavascript подключить

Tom · 21 октября, 2014

Так а чем тогда помочь?

Ukon · 21 октября, 2014

Так а чем тогда помочь?

Ну я знаю, где в тпл вписать, знаю, куда стили вкинуть. А вот куда этот javascript? можете подсказать, все-равно платформа то одна.

Tom · 21 октября, 2014

Одна платформа с чем? И как там в описании можно не понять куда вставляется скрипт?

перед

<?php echo $footer; ?>

и вставляем.

pro5year · 30 октября, 2014

Круто, а не будет ли контент в html коде разбиваться на части? Это не хорошо для поисковиков!

Marianna · 3 июня, 2015

В приведённом примере с категориями использован скрипт

.

<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>

Не особо в этом силён,но как я понимаю вот это в скрипте и указывает с чем ему работать

$(".category-info")

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

$(".div-какой то")

.

не работает, не реагирует на нажатие кнопки развернуть. хотя класс category-info совпадает

Marianna · 3 июня, 2015

Спасибо как всегда chucha, помог, нужно поменять местами код в жаве и все работает:

<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').on('click',function(){
 $('#obexpand').css("display", "none");
 $('.category-info').animate({height: $('.category-info')[0].scrollHeight}, 600);
 $('#obhide').css("display", "block");
 $('.hide').css("display", "none");

});

}


$('#hide').on('click',function(){
$('#obhide').css("display", "none");
$('.category-info').animate({height: 700}, 600);
$('#obexpand').css("display", "block");
$('.hide').css("display", "block");

});
});


//--></script>

[РЕШЕНО] Спойлер описания как сделать?

Рекомендуемые сообщения

sobwoofer 40

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

sobwoofer 40

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Pascha 808

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

sobwoofer 40

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Pascha 808

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

sobwoofer 40

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

sobwoofer 40

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

multimen 11

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Freelab 5

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

kos0760 2

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

kos0760 2

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Ukon 0

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Ukon 0

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Ukon 0

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Tom 2 544

Поделиться сообщением