Спойлер для описания товара

[ONeiLL]

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

 

[Baco]

Открыть файл: catalog/view/theme/default(ваша тема)/template/product/ctegory.tpl
 
перед < ?php echo $footer; ?>
 
Добавляемс: 

<!--свернуть описание для категорий -->
<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>
<!--свернуть описание для категорий -->

не забываем hide.png вставить в /catalog/view/theme/default/image/

[Tom]

Если речь о описании в карточке товара,то так

 

https://opencartforum.com/files/file/1827-%D1%81%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5-%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%B0-%D0%BF%D0%BE%D0%B4-hide-%D0%B0%D0%BD%D0%B0%D0%BB%D0%BE%D0%B3-spoiler/

[Baco]

Только вот как это всё с респонсив дизайном будет состыковываться - неизвестно...

[Marianna]

Открыть файл: catalog/view/theme/default(ваша тема)/template/product/ctegory.tpl

 

перед < ?php echo $footer; ?>

 

Добавляемс: 

<!--свернуть описание для категорий -->
<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>
<!--свернуть описание для категорий -->

не забываем hide.png вставить в /catalog/view/theme/default/image/

не фунциклирует

[Sharapov317]

Здравствуйте!
Вставил на своем сайте скрипт попроще.
Пример ниже.
А как бы так сделать чтобы в визуальный редактор Opencart 2 добавить такую кнопку.
Чтобы пользователь не переходил в режим кода, а выделил текст, нажал на кнопочку, например спойлер и этот текст стал скрытым на сайте.

Типа того как в редакторе на данном форуме

 

Пример OC2.3.0.2

В файле /catalog/view/theme/*/template/product/product.tpl
Добавляем скрипт в самом конце, например перед <?php echo $footer; ?>:

Спойлер

<script language="javascript">
$(document).ready(function(){
$("#allother").hide();
$("#moreless").click(function(e) {
var allother = $("#allother");
$(this).text(allother.is(":visible") ? "» развернуть" : "« свернуть");
allother.slideToggle();
e.stopImmediatePropagation();
return false;
});
});
</script>

 

Теперь в описании в режиме источник используем такую конструкцию:

Спойлер

<span style="font-weight: bold;">Подходит к моделям:</span>
<ul>
<li>пара тройка элементов, которые будут видны</li>
<li>первый</li>
<li>второй</li>
<div id="allother">
Текст который появляется после нажатия на кнопку: » развернуть
</div>
<a href="#" id="moreless">» развернуть</a>

 

Змінено 13 квітня 2020 користувачем Sharapov317