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/

Beget

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;
}

Sternutation

Answer 2

Here is how I have implemented this when 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/

Scandent

That seems close! But it only applies to active classes. The client wants the tab to change color after it's been visited and the user has moved on. Like standard links change from blue to purple after a user has visited the link. – Beget

Heeeeey... that's working. I can just append that code to the end of the jQuery UI accordion widget, right? Or... actually, I think that would require modifying the widget itself, which I'm not allowed to do. I'm trying, though. – Beget

the jQuery UI accordion widget adds classes to my h3 of course. I grabbed one of those and tried to add a class of "read" to it on click, which I could then style. I'm not doing it right though. Here's what I tried: $("h3.ui-accordion-header").click(function() { $(this).addClass('read'); }); – Beget

Your style could be getting overwritten, even though your click event is ok. To combat this, in your CSS, class .read, put !important just before the semi-colon of the background color. eg background: #f00 !important; – Scandent

I can't get it to work with jQuery UI accordion widget. Here is a fiddle I made for it. As you can see, the H3 never picks up the class and therefore never turns red. [FIddle] jsfiddle.net/Lera/UtE3C – Beget

Answer 3

I am having an issue with the visited having teal on it and it shouldn't be overwritten

Your style could be getting overwritten, even though your click event is ok. To combat this, in your CSS, class .read, put !important just before the semi-colon of the background color. eg background: #f00 !important;

example

.accordion {
background-color: #eee !important;
}

-- Used in Ontraport pages

Somite