javascripthtmlcsstwitter-bootstrapbootstrap-5

Prevent bootstrap accordion from opening when clicking on a button on its header

I have two action buttons that are situated on the header of an a accordion like this :

enter image description here

When I click on one of these buttons, it toggles the state of the accordion. I tried e.preventDefault() and e.stopImmediatePropagation() with no success.

Here's the jsfiddle:

https://jsfiddle.net/bxzhqsad/3/

Keep in mind that I'm using Bootstrap 5.

Solution

  • Nesting elements inside the .accordion-button won't allow to capture the inner elements events. A way to achieve this functionality is to separate the inner buttons alongside the .accordion-button and then with absolute positioning achieve a visually similar appearance:

    <h2 class="accordion-header" id="flush-heading-1">
    <div class="d-flex">
      <button type="button" class="accordion-button collapsed text-start" data-bs-toggle="collapse" data-bs-target="#item_1" aria-expanded="true" aria-controls="#item_1">
        <h5 class="content_title fw-bold w-100 text-left">Title 1</h5>
      </button>
      <div class="d-flex align-items-start position-fixed" style="right:100px; z-index:1000;">
          <span class="fa fa-pencil-alt cercle-icons edit-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
          <span class="far fa-trash-alt cercle-icons delete-icon" data-app-id="1" data-content-id="1" aria-hidden="true"></span>
        </div>
    </div>
</h2>

    Please see the modified fiddle