I cannot make the jQuery UI accordion tab change colors when used (e.g.: visited), can I?

Question

I have a good ol 'vanilla jQuery UI accordion. My client asked if the text on the accordion (title) tab could change color when it was read (visited). Although I can apply the pseudo-class of the :hover class to any element, as far as I can tell from my research, I can only apply tags :visited to <a> .

I did a thorough search for this and did not come up with a topic at all. Or am I just asking the wrong question? I suppose there might be a way to write some kind of custom jQuery for this, but I have to use the jQuery UI widget for the accordion. So the question is only about jQuery UI accordions. I think the answer is no.

If anyone has an idea, I will be very grateful. Again, this is for the already available accordion tabs (which were accessed in the past, the user has now switched), and not the active active accordion tabs.

Here is my standard accordion layout.

 <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 is my simple old jQuery UI accordion script:

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

Here is the fiddle I made for her: http://jsfiddle.net/Lera/UtE3C/

Answer 1

I would do it with a simple function.

Working example

 $('#accordion').accordion({ collapsible: true, active: false, header: "h3", heightStyle: "content" }); $('#accordion h3').click(function () { $(this).addClass('newClass'); }); .newClass { color:red; } 

Answer 2

Here is how I implemented this using accordian

CSS

 .toggle-title:hover, .toggle-title:active, .active { /* Added .active rule */ background: #000; color: white; } 

JS:

 $(document).ready(function() { $(".toggle-content").hide(); $(".toggle-title").click(function() { $(this).next(".toggle-content").slideToggle("normal"); $(this).toggleClass('active'); //toggle class active }); }); 

DEMO http://jsfiddle.net/kevinPHPkevin/mZhTY/107/

EDITED

Just change toggleClass to addClass

DEMO http://jsfiddle.net/kevinPHPkevin/mZhTY/108/