using Accordion from jQuery UI, I'm getting an unwanted blue highlight around the last clicked link

Question

I'm using the Accordion widget from jQuery UI.

Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.

I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.

However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??

$(function() {
  $( "#mainnav" ).accordion().blur($('#mainnav'));
});

Answer 1

I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).

jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...

#mainnav .ui-state-focus {
  outline: none;
}