jQuery UI 아코디언 활성 클래스

Question

jQuery UI 플러그인을 기반으로 간단한 아코디언을 만들었습니다. 플러그인은 정상적으로 작동하지만 clickable 요소 (클래스를 열고 닫음)에 클래스를 추가하여 스타일을 다르게 지정할 수 있습니다. 이건 내 마크 업의 구조가

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

입니다 :

다음은 기능의 원유하지만 기능 CodePen 버전의

<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> 

그리고 내 자바 스크립트 :

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

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

현재 모든 패널이 열리지 않습니다. .hidden의 클래스가 .accordion__content에 추가됩니다.

감사합니다. 누군가 도움을 청할 수 있기를 바랍니다. 다음과 같은

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') 
}); 
});