Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

sobwoofer
 Share

Recommended Posts

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 months later...
multimen Rising Star

multimen

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

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

Надіслати
Поділитися на інших сайтах

  • 1 month later...
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 months later...
Tom Grand Master

Tom

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

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

 

перед   

<?php echo $footer; ?>

и вставляем.

Надіслати
Поділитися на інших сайтах
1
1

  • 2 weeks later...
  • 7 months later...
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 years later...
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 months later...
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 языка, не подскажете (или ссылку на статью) как подключить перевод к этому скрипту? Заранее спасибо!

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду