- +7(962)141-55-43
- @wpprog
- emel8881
- serj-post@mail.ru
Как скрыть часть текста в PrestaShop
В этой статье описывается один из простых способов скрытия текста (добавления так называемого ReadMore).
Итак, допустим у нас на странице есть большой текст и нам нужно, чтобы показывался первый абзац, а остальное содержимое открывалось при нажатии кнопки и также пряталось.
Для того, чтобы разместить такой текст на главной странице, нам понадобится 2 файла: readmore.js и еще 1 файл с js-скриптом, код которого приведен ниже:
JQuery-код
$(function() {
$('#demo').readmore({
moreLink: '<a href="#" id="demo" style="color: red;">Read More</a>',
lessLink: '<a href="#"id="demo" style="color: red;">Less</a>',
collapsedHeight: 70,
speed: 200,
afterToggle: function(trigger, element, expanded) {
if (!expanded) { // The "Close" link was clicked
$('html, body').animate({ scrollTop: $(element).offset().top }, { duration: 100 });
}
}
});
});
Копируем оба файла в вашу тему: /httpdocs/themes/ваша_тема/assets/js.
Затем весь ваш текст помещаем в такую конструкцию:
<div class="demo">
<section id="demo">
Ваш текст
</section>
</div>
Если у Вас есть какие-либо вопросы, оставьте свой комментарий: