jQuery ui accordion active class

Question

I have a simple accordion built on the jQuery UI plug-in. The plug-in works as it should but I'd like to add a class onto the clickable element (that opens/closes the content) so that I can style it differently.

Here's a crude but functional CodePen version of the functionality:

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

This is the structure of my mark-up:

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

And my javascript:

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

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

Currently all panels are open my default unless a class of .hidden is added to .accordion__content .

Thanks, hope someone can help with this!

Answer 1

Try something like below:

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