jQueryUI Accordion Header CSS Problem

I have an accordion header like so,

<div id="accordion">
    <h3 id="header1"><a href="#">Stuff: <span id="text">Text </span></a></h3>

and upon some event happening, I change the colour of <span id="text">.

$("h3 #text).css("color","red");

What I want to do is change the colour back to the default accordion header colours. I can change it back to its default colour, but then it doesn't change colour when you hover over it开发者_高级运维 or click it.

Is there a way to change its class or something?

Yes, toggleClass. You want something like:

$("h3 #text).mouseEnter(function{$("h3 #text).toggleClass("header1Active");});
$("h3 #text).mouseLeave(function{$("h3 #text).toggleClass("header1Active");});

Where you have some css:

h3.header1Active {
    color: red
}