javascript

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.

Google Translate API v2 Breakage

I guess there’s a reason not to use Google products when they’re listed as “labs”. I was just doing some work on reTranslate, and it just kept breaking. Turns out that Google changed the object that gets returned to the callback function. It used to be:

response.data.translations[0].translatedText

But now it’s:

response.data.translations[0].translated_text

Interestingly, it looks like they haven’t updated their documentation… so probably now that I’ve made this fix they’re going to revert it tomorrow. What a PITA.