Задержать выполнение javascript? Не знаю, что мне делать в этом случае

В принципе, я использую аккордеон в Bootstrap 5, но поскольку у меня много текста внутри тела аккордеона, закрытие первого при открытии второго занимает больше времени. Я хочу, чтобы он, возможно, задержал выполнение функции JS, чтобы он дождался полного закрытия первого заголовка аккордеона, а затем запустил функцию.

Примерно так это выглядит: https://prnt.sc/17wa079 при нажатии на заголовок 1 у меня есть onclick=goToHeader1, и это в основном просто использование scrollIntoView(), так что заголовок 1 находится в самом верху экрана. Если вы не закрываете заголовок 1 перед открытием заголовка 2, все это странно и показывает только нижнюю часть заголовка 2 вверху (где он должен показывать фактически «Заголовок 2», он показывает нижнюю часть тела заголовка 2). ) или вообще не показывает заголовок 2.

Итак, я подумал, что если бы вы могли отложить onclick="goToHeading2() вы можете подождать, пока заголовок 1 полностью закроется (дайте ему 1 или 2 секунды), затем выполните функцию goToHeading2(), и тогда это исправит это.

Просто не понял, как задержать его на 1 или 2 секунды, поэтому, если кто-нибудь может подсказать, как это сделать, было бы здорово. Или, если у кого-то есть лучший способ сделать это, это было бы еще лучше.