Bootstrap 4.3 Plus and Minus Icon on nested accordions

Question

I have a construct of nested accordions which I want to show a plus and minus button when I open and collapse them.

<div style="padding: 10px">
    <div class="accordion" id="base-data">
        <div class="card">
            <div class="card-header" id="headingOne">
                <div id="buttonContainer" class="mb-0">
                    <button class="btn btn-link fa fa-plus collapsed" id="buttonBaseData" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="font-size:25px">
                        Basisdaten
                    </button>
                </div>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#base-data">
                <div class="card-body">
                    <partial name="_PartialBaseData" />
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="apll-data">
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button class="btn btn-link collapsed fa fa-plus" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:25px">
                        Antragsdaten
                    </button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#apll-data">
                <div class="card-body">
                    <partial name="_PartialApplicationData" />
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="check-data">
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="font-size:25px">
                        Überprüfung
                    </button>
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#check-data">
                <div class="card-body">
                    <partial name="_PartialDataVerification" />
                </div>
            </div>
        </div>
    </div>

</div>

Now the partial tag contains the other accordions which will be injected in this place. For example these are the nested accordions in the _PartialApplicationData html file:

<div class="row">
    <div class="col">
        <div class="accordion" id="pvp-data">
            <div class="card">
                <div class="card-header" id="headingPVP">
                    <h2 class="mb-0">
                        <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapsePVP" aria-expanded="false" aria-controls="collapsePVP" style="font-size:25px">
                            PVP Daten
                        </button>
                    </h2>
                </div>
                <div id="collapsePVP" class="collapse" aria-labelledby="headingPVP" data-parent="#pvp-data">
                    <div class="card-body">
                        <partial name="_PartialPVPData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="foe-data">
            <div class="card">
                <div class="card-header" id="headingPVP">
                    <h2 class="mb-0">
                        <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseFoe" aria-expanded="false" aria-controls="collapseFoe" style="font-size:25px">
                            Förderer Daten
                        </button>
                    </h2>
                </div>
                <div id="collapseFoe" class="collapse" aria-labelledby="headingFoe" data-parent="#foe-data">
                    <div class="card-body">
                        <partial name="_PartialFoerdererData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="bank-data">
            <div class="card">
                <div class="card-header" id="headingBank">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBank" aria-expanded="false" aria-controls="collapseBank" style="font-size:25px">
                            Bankdaten
                        </button>
                    </h2>
                </div>
                <div id="collapseBank" class="collapse" aria-labelledby="headingBank" data-parent="#bank-data">
                    <div class="card-body">
                        <partial name="_PartialBankData" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col">
        <div class="accordion" id="identification-data">
            <div class="card">
                <div class="card-header" id="headingIdentification">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseIdentification" aria-expanded="false" aria-controls="collapseIdentification" style="font-size:25px">
                            Identifikationsdateien
                        </button>
                    </h2>
                </div>
                <div id="collapseIdentification" class="collapse" aria-labelledby="headingIdentification" data-parent="#identification-data">
                    <div class="card-body">
                        <partial name="_PartialIdentificationData" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

What I did try is following jquery code:

$(document).ready(function () {

    // Toggle plus minus icon on show hide of collapse element
    $(".collapse").on('show.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus").addClass("fas");
    }).on('hide.bs.collapse', function () {
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus").addClass("fas");
    });
});

Now when theres only one accordion then it works but when I open and close the nested ones the parent accordion changes the icon too which I dont want. What should I do to make this happen? I saw the other questions but they were not related to nested accordions.

Answer 1

In JavaScripts events (like show.bs.collapse and hide.bs.collapse ) bubble . See this for official docs.

That means, the events fired in your inner accordions will also bubble outwards to the parent accordions.

You can prevent that bubbling by adding event.stopPropagation() to your event handlers. You can read more about that here .

This will advise the event to stop bubbling upwards towards the document root and should result in your accordion icons change exclusively for the accordion you toggled - independet of the fact it may be a nested one.

 $(document).ready(function() { // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(event) { $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus").addClass("fas"); event.stopPropagation(); }).on('hide.bs.collapse', function(event) { $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus").addClass("fas"); event.stopPropagation(); }); });

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" /> <div style="padding: 10px"> <div class="accordion" id="base-data"> <div class="card"> <div class="card-header" id="headingOne"> <div id="buttonContainer" class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" id="buttonBaseData" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" style="font-size:25px"> Basisdaten </button> </div> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#base-data"> <div class="card-body"> <partial name="_PartialBaseData" /> </div> </div> </div> </div> <div class="accordion" id="apll-data"> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed fa fa-plus" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:25px"> Antragsdaten </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#apll-data"> <div class="card-body"> <div class="row"> <div class="col"> <div class="accordion" id="pvp-data"> <div class="card"> <div class="card-header" id="headingPVP"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapsePVP" aria-expanded="false" aria-controls="collapsePVP" style="font-size:25px"> PVP Daten </button> </h2> </div> <div id="collapsePVP" class="collapse" aria-labelledby="headingPVP" data-parent="#pvp-data"> <div class="card-body"> <partial name="_PartialPVPData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="foe-data"> <div class="card"> <div class="card-header" id="headingPVP"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseFoe" aria-expanded="false" aria-controls="collapseFoe" style="font-size:25px"> Förderer Daten </button> </h2> </div> <div id="collapseFoe" class="collapse" aria-labelledby="headingFoe" data-parent="#foe-data"> <div class="card-body"> <partial name="_PartialFoerdererData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="bank-data"> <div class="card"> <div class="card-header" id="headingBank"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseBank" aria-expanded="false" aria-controls="collapseBank" style="font-size:25px"> Bankdaten </button> </h2> </div> <div id="collapseBank" class="collapse" aria-labelledby="headingBank" data-parent="#bank-data"> <div class="card-body"> <partial name="_PartialBankData" /> </div> </div> </div> </div> </div> <div class="col"> <div class="accordion" id="identification-data"> <div class="card"> <div class="card-header" id="headingIdentification"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseIdentification" aria-expanded="false" aria-controls="collapseIdentification" style="font-size:25px"> Identifikationsdateien </button> </h2> </div> <div id="collapseIdentification" class="collapse" aria-labelledby="headingIdentification" data-parent="#identification-data"> <div class="card-body"> <partial name="_PartialIdentificationData" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="accordion" id="check-data"> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link fa fa-plus collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="font-size:25px"> Überprüfung </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#check-data"> <div class="card-body"> <partial name="_PartialDataVerification" /> </div> </div> </div> </div> </div>