Как сделать плавное выпадающее меню?

Помогите, пожалуйста, сделать плавное выпадающее меню. Код ниже работает, но дропдаун не анимированный

$(document).ready(function() {
$('.dropdown').on('click', 'a', function(e) {
    e.preventDefault();
    $(this).closest('li').toggleClass("mobile-open");
    $(this).closest('.fa-angle-down').toggleClass("fa-angle-up");
});
});

<li class="dropdown mobile__dropdown dropdown__mobile">
                <a href="#" id="1" сlass="dropdown-toggle toggle__styles" aria-expanded="false">Цветы<i class="fas fa-angle-down angle__down-flovers"></i></a>
                <div id="2" class="dropdown-menu dropdown__menu-flovers" style="">
                    <ul class="dropdown-menu-item">
                      <li><a href="#">Розы</a></li>
                      <li><a href="#">Ландыши</a></li>
                      <li><a href="#">Каллы</a></li>
                      <li><a href="#">Герберы</a></li>
                      <li><a href="#">Гортензии</a></li>
                      <li><a href="#">Орхидеи</a></li>
                      <li><a href="#">Гвоздики</a></li>
                      <li><a href="#">Ирисы</a></li>
                      <li><a href="#">Кустовые розы</a></li>
                      <li><a href="#">Лилии</a></li>
                      <li><a href="#">Хризантемы</a></li>
                      <li><a href="#">Тюльпаны</a></li>
                      <li><a href="#">Пионы</a></li>
                      <li><a href="#">Подсолнухи</a></li>
                      <li><a href="#">Ромашки</a></li>
                      <li><a href="#"">Пионовидные розы</a></li>
                      <li><a href="#">Ранункулюсы</a></li>
                    </ul>
                </div>
          </li>