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 id="base-data">
<div >
<div id="headingOne">
<div id="buttonContainer" >
<button 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" aria-labelledby="headingOne" data-parent="#base-data">
<div >
<partial name="_PartialBaseData" />
</div>
</div>
</div>
</div>
<div id="apll-data">
<div >
<div id="headingTwo">
<h2 >
<button 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" aria-labelledby="headingTwo" data-parent="#apll-data">
<div >
<partial name="_PartialApplicationData" />
</div>
</div>
</div>
</div>
<div id="check-data">
<div >
<div id="headingThree">
<h2 >
<button 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" aria-labelledby="headingThree" data-parent="#check-data">
<div >
<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 >
<div >
<div id="pvp-data">
<div >
<div id="headingPVP">
<h2 >
<button 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" aria-labelledby="headingPVP" data-parent="#pvp-data">
<div >
<partial name="_PartialPVPData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="foe-data">
<div >
<div id="headingPVP">
<h2 >
<button 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" aria-labelledby="headingFoe" data-parent="#foe-data">
<div >
<partial name="_PartialFoerdererData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="bank-data">
<div >
<div id="headingBank">
<h2 >
<button 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" aria-labelledby="headingBank" data-parent="#bank-data">
<div >
<partial name="_PartialBankData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="identification-data">
<div >
<div id="headingIdentification">
<h2 >
<button 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" aria-labelledby="headingIdentification" data-parent="#identification-data">
<div >
<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.
CodePudding user response：
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 id="base-data">
<div >
<div id="headingOne">
<div id="buttonContainer" >
<button 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" aria-labelledby="headingOne" data-parent="#base-data">
<div >
<partial name="_PartialBaseData" />
</div>
</div>
</div>
</div>
<div id="apll-data">
<div >
<div id="headingTwo">
<h2 >
<button 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" aria-labelledby="headingTwo" data-parent="#apll-data">
<div >
<div >
<div >
<div id="pvp-data">
<div >
<div id="headingPVP">
<h2 >
<button 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" aria-labelledby="headingPVP" data-parent="#pvp-data">
<div >
<partial name="_PartialPVPData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="foe-data">
<div >
<div id="headingPVP">
<h2 >
<button 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" aria-labelledby="headingFoe" data-parent="#foe-data">
<div >
<partial name="_PartialFoerdererData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="bank-data">
<div >
<div id="headingBank">
<h2 >
<button 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" aria-labelledby="headingBank" data-parent="#bank-data">
<div >
<partial name="_PartialBankData" />
</div>
</div>
</div>
</div>
</div>
<div >
<div id="identification-data">
<div >
<div id="headingIdentification">
<h2 >
<button 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" aria-labelledby="headingIdentification" data-parent="#identification-data">
<div >
<partial name="_PartialIdentificationData" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="check-data">
<div >
<div id="headingThree">
<h2 >
<button 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" aria-labelledby="headingThree" data-parent="#check-data">
<div >
<partial name="_PartialDataVerification" />
</div>
</div>
</div>
</div>
</div>