toggle css style in simple jquery accordian

Question

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

Вот код:

$(document).ready(function($) { 
    $('#accordion').find('.accordion-toggle').click(function(){ 

    $(this).toggleClass('activeState'); 

     // Remove active state from other panels not selected 
     $("#accordian").not($(this)).removeClass('activeState'); 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
    }); 

Прямо сейчас я просто использовать класс в «ActiveState», чтобы добавить цвет фона желтый (позже я ищу, чтобы использовать классы значок). Теперь он хорошо переключается при открытии и закрытии одного и того же элемента. Но я хочу, чтобы он переключил/удалял класс activeState, когда на него нажимается другой элемент согласования (тогда, очевидно, добавьте класс activeState к вновь открытому элементу согласования. Я пытаюсь использовать функцию «.not()» jQuery для удаления activeState класс от любого из элементов «.accordian-тумблеров», который не является активным объектом будучи щелкнули. Я здесь, потому что я, не имея каких-либо удачи с ней.

Вот JSFiddle https://jsfiddle.net/0LLncd4d/26/ Могу ли я попросить, пожалуйста, Определенную помощь в том, что я, возможно, упустили из виду?

Answer 1

заменить эти две линии

$(this).toggleClass('activeState'); 
$("#accordian").not($(this)).removeClass('activeState'); 

с

$('.accordion-toggle').removeClass('activeState'); 
if($(this).parent().find('.accordion-content').css('display')=='none'){ 
    $(this).addClass('activeState'); 
} 

Answer 2

Попробуйте так:

$(document).ready(function($) { 
$('#accordion').find('.accordion-toggle').click(function(){ 

$(this).toggleClass('activeState'); 

    // Remove active state from other panels not selected 
    $(".accordion-toggle").not($(this)).removeClass('activeState'); 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

    }); 
});