Determining State with jQuery UI Accordion

It’s quite simple really, but it’s not documented and it took me a little time to figure out, so I figured I’d share.

The basic HTML structure of the clickable portion of the accordion is:

<h3>
	<a>...</a>
</h3>

So when you’re creating your code, the easiest way is to assign a class to the <a> element like so:

<h3>
	<a class="my_accordion">...</a>
</h3>

jQuery UI is nice in that it assigns different classes to the <h3> element based on its state. So then you can just use the following jQuery to determine whether or not it’s open.

if($('.my_accordion').parent('h3').hasClass('ui-state-active')) {
	// accordion is open
}
else {
	// accordion is closed
}

There’s also ‘ui-state-default’ and ‘ui-state-hover’, and probably others as well.