Вы правильно замечаете, что функция `.toggleClass` не создает анимацию при добавлении или удалении класса. Она просто переключает класс, и если у вас нет CSS-анимаций, то изменения будут происходить мгновенно, без каких-либо эффектов.
Чтобы анимация была заметна, вам нужно использовать CSS для создания анимаций. Например, вы можете использовать свойство `height` для создания эффекта раскрытия и скрытия.
Вот пример, как можно реализовать желаемую анимацию:
1. Определите стили в CSS для скрытого и видимого состояния блока. Например, можно использовать `max-height` для создания эффекта раздвижения (находите максимальное значение, которое будет соответствовать высоте вашего контента).
```css
.show-more-height {
max-height: 0; /* Начальное состояние - скрыто */
overflow: hidden; /* Скрыть содержимое */
transition: max-height 1s ease; /* Плавный переход */
}
.show-more-height.active {
max-height: 500px; /* Замените 500px на максимальную высоту вашего контента */
}
```
2. Измените ваш JavaScript-код, чтобы использовать новый класс `active`, который будет переключаться в зависимости от состояния:
```javascript
$(".show-more").click(function () {
if ($("#text-more").hasClass("active")) {
$(this).text("показать все товары");
} else {
$(this).text("скрыть товары");
}
$("#text-more").toggleClass("active"); // здесь просто переключаем класс
});
```
Таким образом, добавив класс `active` на `#text-more`, вы сможете регулировать высоту блока и использовать CSS анимации для создания плавного эффекта развертывания/скрытия.
Обратите внимание, что значение `max-height` должно быть достаточно большим, чтобы охватить весь контент блока. Также учтите, что если у вас контент может динамически изменяться, лучше использовать JavaScript для вычисления максимальной высоты, но это усложнит код. Для простых случаев, как указано выше, этого будет достаточно.