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

sobwoofer · September 18, 2013

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

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

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

sobwoofer · September 19, 2013

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

Pascha · September 19, 2013

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

sobwoofer · September 20, 2013

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

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

http://aqva-mania.ru

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

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

Pascha · September 20, 2013

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

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

sobwoofer · September 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 · September 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 · September 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 · September 23, 2013

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

multimen · January 29, 2014

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

Freelab · March 14, 2014

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

Tom · March 15, 2014

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

kos0760 · March 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 · March 18, 2014

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

Ukon · October 21, 2014

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

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

Tom · October 21, 2014

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

Ukon · October 21, 2014

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

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

Tom · October 21, 2014

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

Ukon · October 21, 2014

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

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

Tom · October 21, 2014

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

перед

<?php echo $footer; ?>

и вставляем.

pro5year · October 30, 2014

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

Marianna · June 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 · June 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>

vtorma · May 10, 2020

В 04.06.2015 в 00:58, Marianna сказал:

Спасибо как всегда 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>

Ошибка: $('.category-info').animate({height: 700}, 600);

Должно быть так: $('.category-info').animate({height: 135}, 600);

Или ваше значение

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

Recommended Posts

sobwoofer 42

Share this post

Link to post

Share on other sites

sobwoofer 42

Share this post

Link to post

Share on other sites

Pascha 41

Share this post

Link to post

Share on other sites

sobwoofer 42

Share this post

Link to post

Share on other sites

Pascha 41

Share this post

Link to post

Share on other sites

sobwoofer 42

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post

Link to post

Share on other sites

sobwoofer 42

Share this post

Link to post

Share on other sites

multimen 35

Share this post

Link to post

Share on other sites

Freelab 5

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post

Link to post

Share on other sites

kos0760 2

Share this post

Link to post

Share on other sites

kos0760 2

Share this post

Link to post

Share on other sites

Ukon 0

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post

Link to post

Share on other sites

Ukon 0

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post

Link to post

Share on other sites

Ukon 0

Share this post

Link to post

Share on other sites

Tom 3,427

Share this post