I know in bootstrap v4 we can use e.stopPropagation(); to prevent accordion from toggling when element in header is clicked.
Like this question.
How to prevent accordion from toggling when button in header is clicked?
However, this method seems not working in Bootstrap v5.
Here is the example.
https://jsfiddle.net/8qdbjfx2/4/
Curious about how to do it?
Thanks for yours answer.
I don't know if you've solved your problem but I found one solution.
Based on that I created a simpler example:
<div class="accordion accordion-flush" id="content_accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading-1">
<div class="d-flex align-items-center position-relative">
<button
type="button"
class="accordion-button collapsed"
data-bs-toggle="collapse"
data-bs-target="#item_1"
aria-expanded="true"
aria-controls="#item_1"
>
Title 1
</button>
<div class="header-slot">
<i class="bi bi-pencil-fill" onclick="hello()"></i>
</div>
</div>
</h2>
<div id="item_1" class="accordion-collapse collapse" aria-labelledby="flush-heading-1" data-bs-parent="#content_accordion">
<div class="accordion-body content_text">Content 1</div>
</div>
</div>
</div>