我目前正在做一个引导 accordion ，它看起来像这样：

<div class="support-accordion">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                    Accordion Item #4
                    <i class="feather-chevron-up"></i>
                </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
                </div>
                </div>
            </div>
        </div>
    </div>

到目前为止，一切都很正常，第一个 accordion 默认情况下是展开的，当我点击其他 accordion 时会关闭。现在，我想知道是否有办法滚动并触发这些 accordion 。例如，我在顶部有一个粘性导航，内容如下：

<div class="controls">
        <ul class="quickselect-controls">
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 1</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 2</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 3</a></li>
            <li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 4</a></li>
        </ul>
    </div>

在一个理想的世界里，我想（一旦点击）这将自动切换特定的 accordion 和滚动到它。
如能得到Maven的帮助，我将不胜感激，谢谢