How can I link to (anchor) accordion item and open it

Question

I've seen some links on this (and questions/answers in here StackOverflow) but I can't seem to get this to work. I have an accordion I created in boostrap and I'm hoping that I can use a link elsewhere on the page to move the user to the accordion and then open the specific accordion item if it isn't already open.

My accordion code is:

    <div id="accordionMessaging" class="accordion" role="tablist">
        <div id="csMessageItem" class="accordion-item">
            <h2 class="accordion-header" role="tab"><button id="composingmessages" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-1" aria-expanded="true" aria-controls="accordionMessaging .item-1">Composing and Sending Messages</button></h2>
            <div id="csMessageContent" class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordionMessaging">
                <div class="accordion-body">
                    <p class="mb-0">Easily draft and send messages to your audience, no matter the size. Keep everyone in the loop with just a few clicks! With group targeting and the ability to send messages to specific users, you have maximum flexibility for personalized communication. You can also schedule messages for later or reuse past messages with ease.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" role="tab"><button id="publicfollowers" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-2" aria-expanded="false" aria-controls="accordionMessaging .item-2">Unlimited &quot;Public&quot; Followers</button></h2>
            <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordionMessaging">
                <div class="accordion-body">
                    <p class="mb-0">Grow your community without limits! jojo lets anyone follow your public channel, giving you a broader reach. Many plans also allow you to create specific groups of unlimited size for targeted engagement. Plus, your public messages can be shared by jojo users across social media, email, and SMS—amplifying your reach even further.</p>
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 id="aihelper" class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-3" aria-expanded="false" aria-controls="accordionMessaging .item-3">Groups and Custom Communications</button></h2>
            <div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordionMessaging">
                <div class="accordion-body">
                    <p class="mb-0">Want to reach specific teams or users? Organize them into groups and send targeted communications for a personal touch. Import entire rosters at once or add jojo users individually to create and populate your groups efficiently.</p>
                </div>
            </div>
        </div>
    </div>

My link is:

    <a href="#csMessageitem" data-toggle="collapse" data-parent="#accordionMessaging">Compose & Send Messages</a>

If I remove the data-toggle and data-parent then it goes to the accordion but doesn't open (or close) any items.

I've also tried:

    <a href="#csMessageitem" data-bs-target="#accordtionMessging .item-1" data-bs-toggle="collapse">Unlimited &quot;Public&quot; followers</a>

I'm using boostrap 5.3

I did see some suggestions to use JS but I am not sure how to write JS.

Answer 1

You could gather all anchors in a list, and then listen for hash change, and then click the toggle button in that anchor element manually, if the hash matches some anchor in the list, and also check if it's opened:

  // get all anchors
  const links = [...document.querySelectorAll('#accordionMessaging .accordion-item')].map(el=>el.getAttribute('id') ? '#'+el.getAttribute('id') : null);

  // accordion toggler
  function toggler(itemId) {

        if(links.includes(itemId)) {

            // check if it's open, and click if not
            const btn = document.querySelector(`#accordionMessaging ${itemId} [data-bs-target]`);
            const acc = document.querySelector(btn.getAttribute('data-bs-target'));

          if(!acc.classList.contains('show')) {
            btn.click();
          }
        }
    }

  // initial check
  toggler(location.hash);

  // open accordion on hash change
  addEventListener('hashchange', (event) => {

      toggler(location.hash);

  });

demo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">

   <div class="d-flex flex-column" style="margin-bottom:15rem;">
      <a href="#csMessageItem">accordion 1</a>

      <a href="#csMessageItem2">accordion 2</a>

      <a href="#csMessageItem3">accordion 3</a>
    </div>

  
<div id="accordionMessaging" class="accordion" role="tablist">
    <div id="csMessageItem" class="accordion-item">
        <h2 class="accordion-header" role="tab"><button id="composingmessages" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-1" aria-expanded="true" aria-controls="accordionMessaging .item-1">Composing and Sending Messages</button></h2>
        <div id="csMessageContent" class="accordion-collapse collapse show item-1" role="tabpanel" data-bs-parent="#accordionMessaging">
            <div class="accordion-body">
                <p class="mb-0">Easily draft and send messages to your audience, no matter the size. Keep everyone in the loop with just a few clicks! With group targeting and the ability to send messages to specific users, you have maximum flexibility for personalized communication. You can also schedule messages for later or reuse past messages with ease.</p>
            </div>
        </div>
    </div>
    <div id="csMessageItem2" class="accordion-item">
        <h2 class="accordion-header" role="tab"><button id="publicfollowers" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-2" aria-expanded="false" aria-controls="accordionMessaging .item-2">Unlimited &quot;Public&quot; Followers</button></h2>
        <div class="accordion-collapse collapse item-2" role="tabpanel" data-bs-parent="#accordionMessaging">
            <div class="accordion-body">
                <p class="mb-0">Grow your community without limits! jojo lets anyone follow your public channel, giving you a broader reach. Many plans also allow you to create specific groups of unlimited size for targeted engagement. Plus, your public messages can be shared by jojo users across social media, email, and SMS—amplifying your reach even further.</p>
            </div>
        </div>
    </div>
    <div id="csMessageItem3" class="accordion-item">
        <h2 id="aihelper" class="accordion-header" role="tab"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionMessaging .item-3" aria-expanded="false" aria-controls="accordionMessaging .item-3">Groups and Custom Communications</button></h2>
        <div class="accordion-collapse collapse item-3" role="tabpanel" data-bs-parent="#accordionMessaging">
            <div class="accordion-body">
                <p class="mb-0">Want to reach specific teams or users? Organize them into groups and send targeted communications for a personal touch. Import entire rosters at once or add jojo users individually to create and populate your groups efficiently.</p>
            </div>
        </div>
    </div>
</div>


<script>

    // get all anchors
  const links = [...document.querySelectorAll('#accordionMessaging .accordion-item')].map(el=>el.getAttribute('id') ? '#'+el.getAttribute('id') : null);

  // accordion toggler
  function toggler(itemId) {

        if(links.includes(itemId)) {

            // check if it's open, and click if not
            const btn = document.querySelector(`#accordionMessaging ${itemId} [data-bs-target]`);
            const acc = document.querySelector(btn.getAttribute('data-bs-target'));

          if(!acc.classList.contains('show')) {
            btn.click();
          }
        }
    }

  // initial check
  toggler(location.hash);

  // open accordion on hash change
  addEventListener('hashchange', (event) => {

      toggler(location.hash);

  });

</script>

</body>
</html>