[Скрипт:] Как свернуть и развернуть текст на сайте с помощью скрипта HTML + JS

Раскрывающийся текст при клике — JS + HTML

Автор nibbl На чтение 3 мин Опубликовано 09.02.2020 Обновлено 09.02.2020

Если вы занимаетесь продвижением интернет магазина SEO, то первое, что делают после запуска сайта, это оптимизация категорий и карточке товара под поисковые запросы, а как это сделать? Конечно же все размещают текста! Одни магазины размещают его:

Текста в категориях:

Сверху перед товаром — считается, что чем выше текст к шапке, тем более релевантная будет страница и тем выше шанс попасть по запросу в ТОП
Снизу страницы под товаром — что бы не смущать посетителей которые хотят купить пылесос текстом о пылесосах, магазины убирают текст в самый низ своей витрины, что бы посетители не убегали с сайта.

В этой статье не будет идти речь о продвижении сайтов или интернет магазинов, в ней я лишь покажу как можно добавить раскрывающийся текст который будет отображаться при клике на кнопку или ссылку

где это можно использовать?

Допустим если вы из клана СЕОшников которые любят ставить текст сверху товарной витрины, его можно скрыть и визуально мы не будем портить вид страницы с категорией и текст будет сверху — тоесть убиваем двух зайцев сразу!

Либо можно скрывать такой текст в карточке товара если описание товара очень большое или еще в каких случаях, это уже зависит от вашей фантазии!

Как свернуть развернуть текст на сайте — ReadMore.js?

В моем примере я буду показывать на примере сайта OpenCart 3, но это также можно использовать и на таких CMS как (wordpress, Joomla, Drupal или самописных движках)

Эффект — сворачиваемый текст на сайте

Мой пример будет посвящен конкретно категориям в которых я хочу разместить текст в самом верху и сворачивать и разворачивать (проведем СЕО эксперимент)

Открываем шаблон в котором у нас находится файл отвечающий за генерацию страницы категории
```
../public_html/catalog/view/theme/МОЙ ШАБЛОН/template/product
```
Открываем файл category.twig

За вывод описания категории у нас отвечает код

   {% if description %}
        <div class="category_description">{{ description }}</div>
        {% endif %}

Спускаемся в самый них страницы и прописываем скрипт

<script type="text/javascript"><!--
$('.category_description').readmore({
	speed: 75,
	collapsedHeight: 150,
	moreLink: '<a href="#"><span style="font-size: 14px; background-color:#ED9A22;font-weight: 700;padding: 5px;color: white;">Подробнее</span></a>',
	lessLink: '<a href="#"><span style="font-size: 14px; background-color:#ED9A22;font-weight: 700;padding: 5px;color: white;">Закрыть</span></a>'
});
//--></script>

Важно в этом скрипте показать, что ему нужно обрабатывать. В нашем примере это category_description и мы ему указываем ,что высота текста будет 150px (collapsedHeight)

Теперь переходим в директорию где у нас шаблон head
```
../public_html/catalog/view/theme/МОЙ ШАБЛОН/template/common
```
Открываем файл header.twig и между тегами <head></head> добавляем скрипт readmore
```
<script src="catalog/view/javascript/readmore.min.js" ></script>
```
Ну и самое последние закидываем сайт скрипт readmore в папку catalog/view/javascript/