JQuery addClass removeClass for accordion

Question

У меня есть аккордеон, который закрывает один элемент при щелчке другого, а также просто щелкает один раз, чтобы открыть и дважды закрыть (accordionButton). Все работает отлично от добавления и удаления двух классов, которые контролируют, если у него есть открытая или закрытая стрелка 'accordionButtonActive' & 'accordionButtonNotactive' Поскольку это контролируется по щелчку, он не удаляет и не добавляет новый класс, если он закрыт щелкнув еще один, а не нажимая снова, чтобы закрыть, что отлично работает.

Я новичок в JQuery и был напуган. Мне удалось заставить эту работу работать до сих пор, теперь я немного озадачен, чтобы сделать эту последнюю функцию функции так, как должна.

JQuery:

$("div.accordionButton").addClass("accordionButtonNotactive"); 

//ACCORDION BUTTON ACTION 
$('div.accordionButton').click(function() { 

    if($(this).next().is(':visible')) { 
     $('div.accordionContent').slideUp('normal'); 
      $(this).addClass("accordionButtonNotactive").removeClass("accordionButtonActive"); 

    } else { 
     $('div.accordionContent').slideUp('normal');  
     $(this).next().slideDown('normal'); 
     $(this).removeClass("accordionButtonNotactive").addClass("accordionButtonActive"); 

    } 
}); 

    //OPEN FIRST  
$("#open").trigger('click'); 


    }); 

Простой HTML:

<div class="accordionButton" id="open">Title</div> 
    <div class="accordionContent"> 
    <p>Content</p> 
    </div> 

Answer 1

Вы можете просто удалить активный-класс и добавить неактивный-класс для любого собрата, когда заголовок любого щёлкнули:

$(this).siblings('.accordionButtonActive') 
    .removeClass('accordionButtonActive') 
    .addClass('accordionButtonNotactive'); 

Example

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

Вы также можете использовать toggleClass, для того, чтобы только иметь дело с этим один класс один раз, для текущего элемента, а не использовать addClass в одном состоянии, а removeClass в другой.

Example