Scoll to and open / toggle Bootrap accordion from text link-CodePudding

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

    <div >
        <div  id="accordionExample">
            <div >
                <h2  id="headingOne">
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Accordion Item #1
                    <i ></i>
                </button>
                </h2>
                <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div >
                <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 >
                <h2  id="headingTwo">
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Accordion Item #2
                    <i ></i>
                </button>
                </h2>
                <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div >
                <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 >
                <h2  id="headingThree">
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Accordion Item #3
                    <i ></i>
                </button>
                </h2>
                <div id="collapseThree"  aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div >
                <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 >
                <h2  id="headingFour">
                <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                    Accordion Item #4
                    <i ></i>
                </button>
                </h2>
                <div id="collapseFour"  aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                <div >
                <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 >
        <ul >
            <li><a href="#"><i ></i> Trigger and Scroll to Accordion 1</a></li>
            <li><a href="#"><i ></i> Trigger and Scroll to Accordion 2</a></li>
            <li><a href="#"><i ></i> Trigger and Scroll to Accordion 3</a></li>
            <li><a href="#"><i ></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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
  <ul >
    <li><a  href="#headingOne"><i ></i> Trigger and Scroll to Accordion 1</a></li>
    <li><a  href="#headingTwo"><i ></i> Trigger and Scroll to Accordion 2</a></li>
    <li><a  href="#headingThree"><i ></i> Trigger and Scroll to Accordion 3</a></li>
    <li><a  href="#headingFour"><i ></i> Trigger and Scroll to Accordion 4</a></li>
  </ul>
</div>

<div >
  <div  id="accordionExample">
    <div >
      <h2  id="headingOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Accordion Item #1
          <i ></i>
        </button>
      </h2>
      <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div >
          <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 >
      <h2  id="headingTwo">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Accordion Item #2
          <i ></i>
        </button>
      </h2>
      <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div >
          <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 >
      <h2  id="headingThree">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Accordion Item #3
          <i ></i>
        </button>
      </h2>
      <div id="collapseThree"  aria-labelledby="headingThree" data-bs-parent="#accordionExample">
        <div >
          <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 >
      <h2  id="headingFour">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          Accordion Item #4
          <i ></i>
        </button>
      </h2>
      <div id="collapseFour"  aria-labelledby="headingFour" data-bs-parent="#accordionExample">
        <div >
          <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>