[jQuery UI - Accordion] Styling active header?

Question

Hi,

Simple issue: I am using Accordion without any UI themes (just barebones, using my own CSS).

So far, so good, except that I cannot figure out how to set an "active" style for the currently selected header.

The jQuery code:

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

The 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 great, except that I cannot find a way to define the styles for the active header without using ThemeRoller.

Manually setting the following styles in my CSS has no effect:

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

Assistance, please?

Answer 1

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

use the "active" control. Not sure if it works without themeroller. The widget has a running count of all the "header"'s used to create your menu. Index 0 is the first one xxx1, Index 1 is the second one xxx2, etc...

Answer 2

I struggled with this one, too. I stripped away the h3 tags that were surrounding my a.nav links and specified header: '.nav'. In my css, I included "a.ui-state-active" to change the header of the open accordion div. For me prepending the "a" made the difference.