Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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

sobwoofer
 Поделиться

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

sobwoofer Experienced

sobwoofer

Опубликовано:
Опубликовано:

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

 

oe0n.png

 

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

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

Ссылка на комментарий
Поделиться на других сайтах
1

sobwoofer Experienced

sobwoofer

Опубликовано:
  • Автор
Опубликовано:

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

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

http://aqva-mania.ru

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

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

Ссылка на комментарий
Поделиться на других сайтах
1

sobwoofer Experienced

sobwoofer

Опубликовано:
  • Автор
Опубликовано:

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

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

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

<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

Ссылка на комментарий
Поделиться на других сайтах
1

Tom Grand Master

Tom

Опубликовано:
Опубликовано:

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

.

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

.

Ссылка на комментарий
Поделиться на других сайтах
1
1

Tom Grand Master

Tom

Опубликовано:
Опубликовано:

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

 

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

<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
Ссылка на комментарий
Поделиться на других сайтах
1
1

  • 4 месяца спустя...
multimen Rising Star

multimen

Опубликовано:
Опубликовано:

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

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

  • 1 месяц спустя...
kos0760 Enthusiast

kos0760

Опубликовано:
Опубликовано:

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

 <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; ?> 
Ссылка на комментарий
Поделиться на других сайтах

  • 7 месяцев спустя...
Tom Grand Master

Tom

Опубликовано:
Опубликовано:

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

Ссылка на комментарий
Поделиться на других сайтах
1
1

Tom Grand Master

Tom

Опубликовано:
Опубликовано:

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

Ссылка на комментарий
Поделиться на других сайтах
1
1

Ukon Apprentice

Ukon

Опубликовано:
Опубликовано:

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

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

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

Tom Grand Master

Tom

Опубликовано:
Опубликовано:

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

 

перед   

<?php echo $footer; ?>

и вставляем.

Ссылка на комментарий
Поделиться на других сайтах
1
1

  • 2 недели спустя...
  • 7 месяцев спустя...
Marianna Mentor

Marianna

Опубликовано:
Опубликовано:

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

.

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

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>
  • +1 1
Ссылка на комментарий
Поделиться на других сайтах

  • 4 года спустя...
vtorma Newbie

vtorma

Опубликовано:
Опубликовано:
В 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);

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

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

  • 11 месяцев спустя...
rusalex Apprentice

rusalex

Опубликовано:
Опубликовано:
В 21.09.2013 в 14:42, Tom сказал:

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

 

  Скрыть контент

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


<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

 

 

Хотел бы сказать вам Огромное спасибо... Супер работает...
Только у меня 3 языка, не подскажете (или ссылку на статью) как подключить перевод к этому скрипту? Заранее спасибо!

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться
Перейти к списку тем

Покупателям

Разработчикам

Полезная информация

Последние дополнения

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.

  Я принимаю