JQuery UI - Accordion - Styling an Active Header?

Question

Simple problem: I use Accordion without any user interface themes (just barebones using my own CSS).

So far, so good, except that I cannot figure out how to set the “active” style for the current selected title.

JQuery Code:

$("#menu").accordion({
  event: "mouseover",
  header: "a.top"
});

HTML code:

<a href="#" class="top">XXX1</a>
<div class="sub">
   <a href="#">Subheading 1</a>
   <a href="#">Subheading 2</a>
   <a href="#">Subheading 3</a>
</div>

<a href="#" class="top">XXX2</a>
<div class="sub">
   <a href="#">Subheading 1</a>
   <a href="#">Subheading 2</a>
   <a href="#">Subheading 3</a>
</div>

This works fine, except that I cannot find a way to define styles for the active header without using ThemeRoller.

Manually setting the following styles in my CSS is not affected:

.ui-state-active
.ui-widget-content .ui-state-active
.ui-state-active a
.ui-state-active a:link
.ui-state-active a:visited

Help please?

Answer 1

. h3, a.nav : ".nav". css "a.ui-state-active", div. "" .

Answer 2

$("#menu").accordion({
    header: "a",
    event: mouseover,
    active:0
});

"" . , themeroller. "", . 0 xxx1, 1 xxx2 ..

Answer 3

For those still using jQuery-ui, just add this to your CSS:

.ui-accordion-header-active {
    background: red !important;
}

Just change the color or background you want!