jquery - Toggle between arrows is not working when open/close accordion -

js fiddle

html

<div id="accordion">     <h1 class="name">cat<i class="fa fa-chevron-down"></i></h1>     <div class="accordion-content">        content content 1     </div>      <h1 class="name">cow<i class="fa fa-chevron-down"></i></h1>     <div class="accordion-content">        content content 2     </div> </div> 

jquery

$('#accordion h1').on('click', function(event){         event.stoppropagation();         event.preventdefault();           var openmenu = $('#accordion .active').next('.accordion-content');         if(event.handled !== true) {            openmenu.velocity("slideup", function() {});            if ($(this).hasclass('active')){             $(this).removeclass('active');              $('i',this).removeclass('fa-chevron-up');             $('i',this).next().addclass('fa-chevron-down');            } else{             $(this).next('.accordion-content').velocity("slidedown", function() {});             $('#accordion h1').removeclass('active');             $(this).addclass('active');             console.log('no active added active');             console.log($('i', this) + "here i");                $('i',this).removeclass('fa-chevron-down');               $('i',this).not('fa-chevron-up').addclass('fa-chevron-up');            }             event.handled = true;         } else {             return false;         }     }); 

as in fiddle, when click on h1 once , again twice, arrows: , down toggle correctly.

but when click on h1, "opened" accordion content close , open accordion content. arrows should toggle accordingly.

1. when click on h1, accordion content open , h1 show arrow up.

2. when click on different h1 again, opened content close , h1 show arrow down , newly content open arrow on h1.

even tried

$('i', this).toggleclass('fa-chevron-down fa-chevron-up'); 

but not working either.

how make arrows change according open/close accordion content?

check updated fiddle

add below code . $('.fa') remove fa-chevron-up element contain "fa" class , add class fa-chevron-down.

     if(event.handled !== true) {          $('.fa').removeclass('fa-chevron-up').addclass('fa-chevron-down');