Sé que en bootstrap v4 podemos usar e.stopPropagation(); para evitar que el acordeón cambie cuando se hace clic en el elemento del encabezado.
Como esta pregunta.
¿Cómo evitar que el acordeón cambie cuando se hace clic en el botón del encabezado?
Sin embargo, este método parece no funcionar en Bootstrap v5.
Aquí está el ejemplo.
https://jsfiddle.net/8qdbjfx2/4/
¿Tienes curiosidad por saber cómo hacerlo?
Gracias por tu respuesta.
No sé si resolviste tu problema, pero encontré una solución .
Basado en eso, creé un ejemplo más simple :
<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>