I have a collection of collapsible sections within a main collapsible section like:
<div id="parentAccordion" class="card-accordion">
<div class="card">
<div class="card-header bg-black text-white pointer-cursor">
<div class="row">
<div style="font-size:16px">Custom - <span data-bind="text:$root.nameSelected"></span></div>
</div>
</div>
<div id="parentBody" class="collapse show" data-parent="#parentAccordion" style="background-color: #d9e0e7">
<!-- begin #accordion -->
<div id="oAccordion" class="card-accordion">
<!-- begin card -->
<div class="card" data-bind="foreach:$root.fbolist">
<div style="padding: 3px">
<div class="card-header bg-black text-white pointer-cursor" data-toggle="collapse" data-bind="attr: { href: '#O'+CourseId(), title: cName }">
<i class="fa fa-caret-right"></i>
<span data-bind="text:cName">NAME</span>
</div>
<div class="collapse" data-bind="attr:{'id':'O'+CourseId()}" data-parent="#oBody">
<div class="card-body white text-justify">
<!-- content here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now, I'm attempting to change the icon when an item is expanded to caret-down and back to caret-right when collapsed. Only one collapsible item from the child list (fbolist) should be open at a time, closing the others. I've utilized this JavaScript code to switch the icons:
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right");
});
However, it changes all the icons for the remaining collapsible items inside Knockout foreach. Is there a method to avoid changing all icons to caret-down when only one is expanded? It should display the caret-down icon only on the opened item, with the rest showing caret-right.