Я использовал используемые классы аккордеона и коллапса из начальной загрузки и добавил потрясающие значки шрифтов в заголовки карточек. И с помощью jquery я меняю значки на стрелки вверх и вниз, используя события коллапса. Все это работало нормально, но только после того, какзначок меняется .. как только я расширил три тела карты, после этого все иконки были вверх, стрелки ... и после этого он не изменился. при загрузке html-страницы он работает только один раз ... что я могу сделать, чтобы повторить то же самое ...
<script>
$(document).ready(function(){
$('.collapse').on('hide.bs.collapse',function(){
$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-up').addClass('.fas fa-angle-down');});
$('.collapse').on('show.bs.collapse',function(){
$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-down').addClass('.fas fa-angle-up');});
});
</script>
<div class="container">
<div id="accordian">
<div class="card">
<div class="card-header">
<i class="fas fa-angle-down"></i>
<a href="#collapse1" data-toggle="collapse">Asia</a>
</div>
<div class="card-body collapse"data-parent="#accordian" id="collapse1">
<ul>
<li>India</li>
<li>China</li>
<li>Japan</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-angle-down"></i>
<a href="#collapse2" data-toggle="collapse">Europe</a>
</div>
<div class="card-body collapse "data-parent="#accordian" id="collapse2">
<ul>
<li>Italy</li>
<li>Germany</li>
<li>France</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
<i class="fas fa-angle-down"></i>
<a href="#collapse3" data-toggle="collapse">North America</a>
</div>
<div class="card-body collapse"data-parent="#accordian" id="collapse3">
<ul>
<li>Canada</li>
<li>Mexico</li>
<li>US</li>
</ul>
</div>
</div>
</div>
</div>