Попытка замедлить реверс на toggleCLass () закрыть аккордеон с помощью jquery

Question

У меня есть аккордеон с начальной загрузкой 4, у которого при закрытии есть радиус границы, когда я открываю его, тело аккордеона не имеет полей / отступов, как если бы это был один элемент.кнопка для открытия имеет радиус границы 10 пикселей вокруг.Когда аккордеон открыт, мне нужно иметь границу внизу слева и справа без радиуса, чтобы она хорошо сочеталась с содержимым тела.Я переключаю класс, чтобы сделать это.Теперь, когда я нажимаю на аккордеон, я использую toggleClass, который отлично работает на открытом аккордеоне, но когда я нажимаю, чтобы закрыть аккордеон, удаление радиуса границы происходит быстро.Мне было интересно, есть ли лучший способ отложить этот разворот на переключателе, чтобы закрытие выглядело более естественным.

HTML:
 <button class="btn-reset-styles accordion-btn" type="button" data-toggle="collapse"
                    data-target="#faqCollapse"
                    aria-expanded="false" aria-controls="faqCollapse">
                Hello how can I help?
                <i class="fas fa-angle-right"></i>
                <i class="fas fa-angle-down d-none"></i>
            </button>
            <div class="collapse" id="faqCollapse">
                <div class="accordion-content accordion-content--body">
                    <div class="accordion-link-block">
                        <p>test</p>
                        <a href="/"> <i class="fas fa-angle-right"></i></a>
                    </div>
                    <div class="accordion-link-block">
                        <p>test p</p>
                        <a href="/"> <i class="fas fa-angle-right"></i></a>
                    </div>
                </div>

SCSS:
.accordion-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background: $blue-darkest;
width: 100%;
height: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
padding: 0 18px 0 18px;
color: $white;
cursor: pointer;

&:focus {
  outline: none;
  box-shadow: none;
}

.fas {
  font-size: 27px;
  font-weight: 500;
    }
  }

  .no-bottom-radius {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
 }

jQuery:
/* doc.ready */
$(document).ready(function () {
    $($accordionBtn).on('click', function () {
        $(this).toggleClass('no-bottom-radius');
    });
});
/* end doc.ready */