Question

I have an accordion with a custom stylesheet from themeroller. the problem is that when I collapse one of the parts of the accordion it changes the collapsed header to black instead of going back to the original red color. I have looked through css and my only thought is this a is a javascript issue bc my hover color is black and for some reason it is staying that color when collapsed.

here is a link http://filtersavvy.com/index.php?main_page=index&cPath=351_448&sort=20a

Answer 1

Look for this CSS rule

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: url("/includes/templates/theme376/css/images/ui-bg_highlight-soft_100_100909_1x100.png") repeat-x scroll 50% 50% #F50019;
    border: 1px solid #F50019;
    color: #FFFFFF;
    font-weight: normal;
}

The issue is caused by the class .ui-state-focus which displays the black background for the clicked menu item while it has focus. Remove the class from that rule or redefine it like this:

.ui-state-focus { background: none }