jQuery ui accordion active class

Question

У меня есть простой аккордеон, построенный на подключаемом модуле jQuery UI. Плагин работает так, как должен, но я хотел бы добавить класс в элемент clickable (который открывает/закрывает содержимое), так что я могу по-разному стилизовать его.

Вот грубая, но функциональная версия CodePen функциональности:

http://codepen.io/moy/pen/dXObjX

Это структура моей наценки:

<div class="mount accordion"> 

    <div class="hgroup accordion__toggle"> 
     <h3 class="hgroup__title">Course 1</h3> 
    </div> 

    <div class="accordion__content"> 
     <!-- Hidden content in here --> 
    </div> 
</div> 

И мой JavaScript:

$(document).ready(function($) { 
    $('.accordion').find('.accordion__toggle').click(function(){ 

     // Expand or collapse this panel 
     $(this).next('.accordion__content').slideToggle(200); 
    }); 
}); 

В настоящее время все панели открыты по умолчанию, если только к .accordion__content добавлен класс .hidden.

Спасибо, надеюсь, что кто-то может помочь с этим!

Answer 1

попробовать что-то, как показано ниже:

$(document).ready(function($) { 
$('.accordion').find('.accordion__toggle').click(function(){ 

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

    //toggle class 
    $(this).toggleClass('classname') 
}); 
});