bootstrap link in accordion header: stopPropagation not working

Question

I am trying to add an external link to a bootstrap accordion header using stopPropagation on the click event.

Unfortunately, the link is not working and the expanding/collapsing of the accordion still happens.

html:

<ul class="accordion" id="collapse1">
  <li>
    <div class="accordion-button collapsed" href="#one" 
         data-bs-toggle="collapse" data-bs-target="#one" aria-expanded="false">
         Maincategory
         &nbsp;/&nbsp;
         <a href="https://google.com" class="non-collapsing">
           open
         </a>
    </div>
    <ul class="accordion-collapse collapse" id="one" data-bs-parent="#collapse1">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
</ul>

js:

$('.non-collapsing').on('click', function (e) {
    e.stopPropagation();
});

jsfiddle: https://jsfiddle.net/ct503zgf/

Can anybody give a hint why this is not working?

Answer 1

after hanging on the same problem i read your solution. This solution got me the right way, but it's enough to add data-bs-toggle="collapse" data-bs-target to the non-collapsing element. The JavaScript-Code is not necessary.

Answer 2

Adding data-bs-toggle="collapse" and an empty data-bs-target to the link element worked for me. (works also with a <button> instead of <a>)

<ul class="accordion" id="collapse1">
  <li>
    <div class="accordion-button collapsed" href="#one" 
         data-bs-toggle="collapse" data-bs-target="#one" aria-expanded="false">
         Maincategory
         &nbsp;/&nbsp;
         <a href="https://google.com" class="non-collapsing" data-bs-toggle="collapse" data-bs-target>
           open
         </a>
    </div>
    <ul class="accordion-collapse collapse" id="one" data-bs-parent="#collapse1">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
      <li><a href="#">Sub 3</a></li>
    </ul>
  </li>
</ul>

jsfiddle: https://jsfiddle.net/Lkfdr2vt/