Toggle between arrows is not working when open/close accordion

Question

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 but 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 and again twice, arrows: up and down toggle correctly.

But when click on another h1, then "opened" accordion content will close and open another accordion content. So the arrows should toggle accordingly.

1. when click on another h1, its accordion content will open and h1 will show arrow up.

2. when click on another different h1 again, the previously opened content will close and h1 will show arrow down and newly content will be open with arrow up on h1.

Even tried

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

But it is not working either.

How to make arrows change according to the open/close accordion content?

Answer 1

separate your css

.accordion-content1 {
display: none;
}
.accordion-content2 {
    display: none;
}

add some code in jquery like this..

$(".accordion-content1").css("display", "inline"); // for first one

Answer 2

I think this can be a solution

Javascript

$('#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');

            $(this).children('i').removeClass('fa-chevron-up');
            $(this).siblings().children('i').addClass('fa-chevron-down');
            $(this).children('i').addClass('fa-chevron-down');
          } else{
            $(this).next('.accordion-content').velocity("slideDown", function() {});
            $('#accordion h1').removeClass('active');
            $(this).addClass('active');
            console.log('no active but added active');
            console.log($('i', this) + "here i");

              $(this).children('i').removeClass('fa-chevron-down');
              $(this).children('i').addClass('fa-chevron-up');
              $(this).siblings().children('i').addClass('fa-chevron-down');
          }
            event.handled = true;
        } else {
            return false;
        }
    });

Answer 3

check updated FIDDLE

add below code . $('.fa') remove fa-chevron-up from i element which contain "fa" class and add class fa-chevron-down.

     if(event.handled !== true) {

        $('.fa').removeClass('fa-chevron-up').addClass('fa-chevron-down');