.toggleClass не анимирует раскрытие и скрытие блока — что не так?

Question

[mangust1785]

Немного нужна помощь. Стандартная разметка на товары

<div class="row show-more-height" id="text-more">
     <div class="col-md-3">товар</div>
     <div class="col-md-3">товар</div>
     <div class="col-md-3">товар</div>
     <div class="col-md-3">товар</div>
     ...
</div>
<div class="button-more">
<a class="show-more">показать все товары</a>
</div>

Код разворачивания и сворачивания

$(".show-more").click(function () {
    if($("#text-more").hasClass("show-more-height")) {
        $(this).text("скрыть товары");
    } else {
        $(this).text("показать все товары");
    }
    $("#text-more").toggleClass("show-more-height", 1000);
});

Разворачивает полностью весь блок с товарами и сворачивает, но без плавной анимации
Что не так в этом коде

ps сильно не ругайте, я в этом чайник

Answer 1

[Данила]

Вы неверно выбрали метод .toggleClass(), он не анимирует изменение высоты элемента.
Вы можете использовать .slideToggle() в совокупности с .toggleClass():

$(".show-more").click(function () {
    if($("#text-more").hasClass("expanded")) {
        $(this).text("показать все товары");
    } else {
        $(this).text("скрыть товары");
    }
    $("#text-more").slideToggle(1000).toggleClass("expanded");
});

Comments

[mangust1785]

Здорово, анимируется

Только теперь при нажатии на "показать все товары", список товаров сворачивается полностью и пропадает, а должен полностью развернутся

[Данила]

Можете задать фиксированную высоту max-height в классе expanded:

.expanded {
    max-height: 2000px;
}

Опять же под себя нужно подстраивать. Но это вариант такой себе.
Вы можете динамически определяться max-height при помощи javascript:

.show-more-height {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 1s ease;
}

.expanded {
    max-height: none;
}

$(".show-more").click(function () {
    var $textMore = $("#text-more");

    if ($textMore.hasClass("expanded")) {
        $(this).text("показать все товары");
        $textMore.removeClass("expanded").css("max-height", "100px");
    } else {
        $(this).text("скрыть товары");
        var fullHeight = $textMore.prop("scrollHeight") + "px";
        $textMore.addClass("expanded").css("max-height", fullHeight);
    }
});

[mangust1785]

Данила, со вторым вариантом классно все получилось, огромное спасибо за помощь!