Question

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

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.

Answer 2

$("#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 3

For anyone 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!

友情链接