I'm in the process of incorporating a clickable help feature into my Bootstrap 5 accordion, as shown in the following screenshot:
https://i.sstatic.net/G8rDI.png
The idea is to allow users to click on the question mark icon, which will then trigger a Bootstrap modal containing helpful information.
However, the issue I'm facing is that when the help icon is clicked, the modal opens but the accordion collapses (or opens if it was closed).
Here is the JavaScript code I'm currently using to address this problem:
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
Does anyone have any suggestions on how I can prevent the accordion from collapsing or opening when the help icon is clicked?
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2cdd2cf">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d8699869b">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button onglet-header" type="button" data-bs-toggle="collapse" data-bs-target="#nom_pays" aria-expanded="true" aria-controls="nom_pays">
Accordion <i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
</button>
</h2>
<div id="nom_pays" class="accordion-collapse collapse show" aria-labelledby="nom_pays_header" data-bs-parent="#fiche_bois">
<div class="accordion-body">
Accordion Body
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"/>
</div>
<div class="modal-body">
Modal body
</div>
</div>
</div>
</div>
</body>
</html>