I can't make a jQuery UI accordion tab change colors when used (like a:visited), can I?

Question

I have a good ol' vanilla jQuery UI accordion going. My client asked if the text on the accordion tab (header) could change color when its been read (visited). Although I can apply the pseudo-class :hover to any element, as far as I can tell through my research, I can only apply :visited to <a> elements.

I've done a thorough search for this and come up with nothing on the topic at all. Or am I just asking the question wrong? I guess there might be a way to write some custom jQuery for this, but I am constrained to use the jQuery UI accordion widget. So the question is for jQuery UI accordions only. I believe the answer is no.

If anyone has an idea, I'd be very grateful. Again, this is for already accessed accordion tabs (accessed in the past, user has now moved on), not currently active accordion tabs.

Here's my standard accordion markup.

<div id="accordion">
  <h3>Research</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Resources and Guides</h3>
    <div>
      <p>Content Here</p>
    </div>
  <h3>Regulations</h3>
    <div>
      <p>Content Here</p>
    </div>
</div>

Here's my plain old jQuery UI accordion script:

   jQuery('#accordion').accordion({
     collapsible: true, 
     active: false, 
     header: "h3", 
     heightStyle: "content"
   });

Here is a fiddle I made for it: http://jsfiddle.net/Lera/UtE3C/

Answer 1

I would do it with a simple click function.

Working Example

$('#accordion').accordion({
    collapsible: true,
    active: false,
    header: "h3",
    heightStyle: "content"
});

$('#accordion h3').click(function () {
    $(this).addClass('newClass');
});

.newClass {
    color:red;
}