I am trying to implement a nested accordion structure that displays plus and minus buttons when opening and collapsing each section.
<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">
Basic Data
</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>
In the partial tag, other accordions will be injected at this location. For example, in the _PartialApplicationData file, these are the nested accordions:
<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 Data
</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>
I have attempted to use the following jQuery code to toggle plus and minus icons when collapsing and expanding sections:
$(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");
});
});
This jQuery code works fine for a single accordion, but when nested accordions are opened and closed, the parent accordion's icon also changes, which is not the desired behavior. What modifications can I make to ensure that the icons of nested accordions do not affect the parent accordion?