'Boostrap 5 accordion : clickable element in header

I'm trying to add a clickable helping zone in my Bootstrap 5 accordion, as you can see in this screenshot :

I want the user to be capable of clicking the question mark, that will open a Bootstrap modal with some helping text.

However, when doing so, the modal is opening but the accordion is collapsing (or opening if closed).

I've used the following JavaScript code to achieve this goal :

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();
            }
        });
    }
}

Any clues how I can prevent the accordion to collapse/open when clicking the help icon ?

       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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 &nbsp; <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>

Solution 1:^[1]

You do not have to write extra JavaScript to trigger modal.

You can easily do it with the bootstrap html attributes.

In order to trigger your modal, by clicking the question mark

Replace:

<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>

With:

<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#modal"></i>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Konstantinos Gallis

'Boostrap 5 accordion : clickable element in header

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]