why icons in bootstrap change only once on collapse ?why jquery code run only once?

Question

i hav a used accordian and collapse classes from bootstrap and have added font awesome icons to the card headings.and using jquery i changes icons to up arrows and down arrows using collapse events..all of it worked fine but only once the icon changes..once i expanded three card bodys after that all icon was up arrows..and it didnt change afterwards.on loading the html page it works only once..what can i do to repeat the same..

 <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>

Answer 1

You have written the icon changing code in $(document).ready(function() . So, it will run only once when your page is ready. You can write this in the onclick() event.