Bootstrap Accordian - экран прокрутки с развертыванием или развалом нового раздела (после первого щелчка)?

Question

У меня есть работающий аккордеон, использующий Bootstrap-4 и CSS. Все работает отлично, как подробно описано в документации. У меня проблема с юзабилити, которую я пытаюсь решить. Каждая карта содержит большое количество контента в аккордеоне. Когда пользователь нажимает любую кнопку аккордеона, первое взаимодействие открывается правильно, но последующие нажатия, чтобы открыть другие разделы, сдвигают аккордеон, но позиция экрана не следует (когда складывается раздел, он открывает новый раздел, но оставляет экран где-то посерединенового контента, заставляющего пользователя прокручивать назад).

Если возможно, я бы хотел, чтобы экран прокручивал до класса заголовка карты вновь открытого раздела. Любая помощь будет оценена.

Я UX-дизайнер / художник, мои навыки работы с HTML и CSS достаточны, но я сам не способен написать сложный цикл JavaScript сам (у меня есть только введение в класс JavaScript в моем фоне).

<div class="accordion" id="myAccordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">1. What is HTML?</button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#myAccordion">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">2. What is Bootstrap?</button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">3. What is CSS?</button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#myAccordion">
            <div class="card-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

ОБНОВЛЕНИЕ Я нашел простое решение с использованием JavaScript:

$("#myAccordion").on("shown.bs.collapse", e => {
  $("html, body").animate({
      scrollTop: $(e.target)
        .prev()
        .offset()
        .top
    },
    400
  );
})  

Теперь у меня есть еще один вопрос, JavaScript запускается, когда завершено open, есть ли способ получитьJavaScript запускается по щелчку, чтобы он прокручивался одновременно с «открытым»?