Jump to content
Sign in to follow this  
sobwoofer

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

Recommended Posts

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

 

oe0n.png

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

http://aqva-mania.ru

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

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

Share this post


Link to post
Share on other sites

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

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

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

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

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

Скриншот:

ajgt.png

Share this post


Link to post
Share on other sites

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

.

<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-какой то")

.

Share this post


Link to post
Share on other sites

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

 

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

<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

 

  • +1 6

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

da27fcd402d3.jpg

 

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

94c765efaa80.jpg

 

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

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

перед   

<?php echo $footer; ?>

и вставляем.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

.

<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 совпадает

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.