jquery twitter-bootstrap bootstrap-5 bootstrap-accordion

Scoll to and open / toggle Bootrap accordion from text link

I am currently working on a a bootstrap accordion which looks like this:

    <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>

So far all is working fine and the first accordion is expanded by default and closing when I click others. Now , I would like to know if there is a way to scroll to and trigger these accordions. For instance I have a sticky nav at the top with the following content:

    <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>

In an ideal world I would like to (once clicked) this would automatically toggle the specific accordion and scroll to it.

Some expert help would be greatly appreciated, thank you

Solution

Scroll to a specific card: link href with an id you want to scroll to.
Show it: add JS.

See the snippet below.

$(document).ready(function() {
  $(".trigger-1").click(function() {
    // Show first card
    $("#headingOne button").removeClass("collapsed");
    $("#collapseOne").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingOne) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseOne)").removeClass("show");
  });

  $(".trigger-2").click(function() {
    // Show second card
    $("#headingTwo button").removeClass("collapsed");
    $("#collapseTwo").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingTwo) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseTwo)").removeClass("show");
  });

  $(".trigger-3").click(function() {
    // Show third card
    $("#headingThree button").removeClass("collapsed");
    $("#collapseThree").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingThree) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseThree)").removeClass("show");
  });

  $(".trigger-4").click(function() {
    // Show fourth card
    $("#headingFour button").removeClass("collapsed");
    $("#collapseFour").addClass("show");

    // Hide all others
    $(".accordion-header:not(#headingFour) button").addClass("collapsed");
    $(".accordion-item > div:not(#collapseFour)").removeClass("show");
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

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

<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>