Изменение значка аккордеона при щелчке - javascript

Question

Мой текущий аккордеон открывается и закрывается нормально и работает так, как мне бы хотелось, однако значки не изменяются должным образом при закрытии вкладок.

Есть ли место для изменения значков в соответствии с статусом вкладок, даже если открыта другая вкладка, закрывая предыдущую вкладку?

по существу значок должен показывать минус, когда его открытым и плюс, когда его закрытым, поэтому, когда вкладка открыта нажата она меняется ...

вот JS Скрипки, мы надеемся, больше смысла во всем этом ... https://jsfiddle.net/wf2goy8s/4/

вот мой JavaScript:

jQuery(document).ready(function($) { 
    var main_blc = $('.main-blc-accord'); 
    main_blc.find('dd').hide(); 
    main_blc.find('dd').prev().addClass('plus') 
    main_blc.find('dd').first().prev().removeClass('plus'); 
    main_blc.find('dd').first().show(); 

    main_blc.find('dt').on('click', function(event) { 
     var dd=$(this).next('dd'); 
     main_blc.find('dd').not(dd).slideUp('slow');   
     dd.slideToggle(); 
     $(this).toggleClass('plus');  
    }); 

    $('.mobile-btn-menu').find('span').on('click', function(event) { 
      $(this).parent().next('.footer-menu').toggleClass('show'); 
    }); 
}); 

Answer 1

Вы можете попробовать использовать CSS вдоль этих линий. Я добавил это к вашей скрипке, и это сработало, за исключением того, что класс .plus изначально не применяется, но вы можете это исправить.

.plus h3:before { 
    content: "+ "; 
    color: blue; 
} 

Answer 2

Может быть, вы хотите попробовать это:

http://jsfiddle.net/30u0npss/3/

<dl class="accordion"> 
    <dt><span>Title 1</span><i class="plus"></i></dt> 
    <dd class="accordion_content">Content 1</dd> 
    <dt><span>Title 2</span><i class="plus"></i></dt> 
    <dd class="accordion_content">Content 2</dd> 
    <dt><span>Title 3</span><i class="plus"></i></dt> 
    <dd class="accordion_content">Content 3</dd> 
</dl> 
jQuery('.accordion dt').click(function() { 
    jQuery(this).toggleClass('active').find('i').toggleClass('plus minus') 
      .closest('dt').siblings('dt') 
      .removeClass('active').find('i').removeClass('minus').addClass('plus'); 

      jQuery(this).next('.accordion_content').slideToggle().siblings('.accordion_content').slideUp(); 


}); 

jQuery('.accordion_content').hide(); 
.plus:before{ 
    content:"+"; 
} 
.minus:before{ 
    content:"-"; 
} 

Answer 3

Вы можете отслеживать, если она расширяется, а затем переключите плюс для всех узлов, и, наконец, если он расширяется, ручка надлежащим образом:

main_blc.find('dt').on('click', function(event) { 
    var expanding = false 
    if ($(this).attr('class')==='plus') 
     expanding = true 
    main_blc.find('dt').addClass('plus'); 
    var dd=$(this).next('dd'); 
    main_blc.find('dd').not(dd).slideUp('slow');   
    dd.slideToggle(); 
    if (expanding) 
     $(this).removeClass('plus') 
});