1

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>
dan1st
  • 12,568
  • 8
  • 34
  • 67
fathima k
  • 11
  • 1
  • – fathima k Oct 20 '19 at 09:39
  • the above code worked properly..it was just a small mistake ..that in find i gave same class as fa-angle-down in both..now i changed one of them to fa-angle-up and it works.. thanks for all helps.. – fathima k Oct 20 '19 at 09:39

1 Answers1

0

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.

Priyanga
  • 143
  • 1
  • 3
  • 16
  • – fathima k Oct 19 '19 at 13:32
  • even this script written on click function gives the same result... – fathima k Oct 19 '19 at 13:32
  • You might have noticed that all jQuery methods in our examples, are inside a document ready event: $(document).ready(function(){ // jQuery methods go here... }); This is to prevent any jQuery code from running before the document is finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section. – fathima k Oct 19 '19 at 14:12
  • hide.bs.collapse -Occurs when the collapsible element is about to be hidden & show.bs.collapse..this is the event i hav used here – fathima k Oct 19 '19 at 14:16