How do I remove an active outline from jquery accordion ?

Question

I am using Jquery Accordion. The active link has an outline. I have tried using css:

#accordion a:focus
 { outline: none; }
#accordion a:active 
{outline: none; font-weight:bold;}

and also

#accordion a:-moz-any-link:focus 
{ outline: none; }

None of these seem to work. Can anyone advise a setting or another option to remove the dotted outline around the active links?

Answer 1

When I need to override the styles applied by jQuery UI elements, I usually add a stylesheet that I load after the jQuery UI stylesheet and put my overrides into it, using the same selectors so that I know that my styles will take precedence. In this case look for the styles associated with the accordion or the widget state and override them.

Answer 2

If you're using jQueryUI's Accordion, http://jqueryui.com/demos/accordion/, you shouldn't have a problem with these types of outlines. If you are though, you could do the following:

$(".ui-accordion-header a").click(function(){
  $(this).blur();
});

In fact, this method will work with just about any accordion plugin - just be sure to modify the selector to target the links responsible for expanding/collapsing the data panels.

Answer 3

Hello All, Both of these don't work??? The outline still appears until i click elsewhere on the screen. are there any ways i can change the css of the accordion to never show an outline.

Iv also tried using span and div tags instead of the 'a' tag but still no joy...

Answer 4

Be sure to press F5 once in a while... and make sure you are not editing other files than you think you are.

Answer 5

123456789012345

Answer 6

SORTED:

amend the css to - ui-state-focus

Answer 7

Add this to your CSS stylesheet and it will take care of the blur/focus outline:

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

Answer 8

You need to figure out the tab element's class being applied by the widget. For instance,

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

works on the most recent version of jQuery UI, but on an earlier version like the 1.6, you'd need to use this:

.ui-accordion-header {outline: none;}