Изменить изображение с помощью jquery при изменении заголовка гармоника

Question

У меня есть настройка аккордеона для faqs, с изменением фонового изображения. Теперь я пытаюсь добавить стрелку вверх или вниз к .ac-заголовку в зависимости от активного состояния .ac-заголовка. Вот мой текущий код:

<ul id="faqs-list" class="fd-accordion"> 
    <li> 
     <header class="ac-header"> 
      <h4>1. Question 1?</h4> 
      <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" /> 
     </header> 
     <div class="ac-content"> 
      <p>Answer 1</p> 
     </div> 
    </li> 
    <li> 
     <header class="ac-header"> 
      <h4>1. Question 2?</h4> 
      <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" /> 
     </header> 
     <div class="ac-content"> 
      <p>Answer 2</p> 
     </div> 
    </li> 
</ul> 



$(function(){ 
    $(document).ready(function() { 
    $(".ac-content").hide(); 

    $('.ac-header').on("click", function (e) { 
    $('.ac-header').not(this) 
       .removeClass("active") 
       .next(".ac-content") 
       .hide(); 

    $(this).toggleClass("active") 
     .next(".ac-content") 
     .toggle($(this).is(".active")); 
    }); 
}); 

В поисках предложений относительно того, что следует добавить в JavaScript, чтобы изменить изображение «стрелочка down.png». Благодаря!

Answer 1

Попробуйте это: после того, как переключая класс активного, проверьте заголовок имеет активный класс или нет, и изменить изображение в соответствии с

$(document).ready(function() { 
     $(".ac-content").hide(); 

     $('.ac-header').on("click", function (e) { 
     $('.ac-header').not(this) 
        .removeClass("active") 
        .next(".ac-content") 
        .hide(); 

     $('.ac-header').find('img').attr('src','assets/images/arrow-down.png').attr('alt','down-arrow'); 

    $(this).toggleClass("active") 
     .next(".ac-content") 
     .toggle($(this).is(".active")); 

    if($(this).hasClass('active')) 
    { 
     $(this).find('img').attr('src','assets/images/arrow-right.png').attr('alt','right-arrow'); 
    } 

    }); 
}); 

DEMO