jQuery color change or CSS?

Question

I've tried achieving a hover/selected color change for a particular field, but I'm thinking jQuery is the answer. I've looked into some button click tutorials, but maybe I'm not just seeing it or doing it correctly.

The idea here is that when a user hovers over a Headline, the background color changes, when they click the headline to expand it, the background color remains constant (selected), however as it stands right now the background color of the expanded fields do not change.

Here is the demo: http://www.notedls.com/demo

Answer 1

I see that you have JQuery add a selected class to your li element when clicked. Depending on what you want to do, you can color the li.selected background color, or target the div based on the li.selected element.

ul#acc1 li.selected {
   background-color: #xxxxxx;
}

ul#acc1 li.selected div {
   background-color: #xxxxxx;
}

Answer 2

Use jQuery to add/remove classes that set the styles. This will keep css separate to the code, which is a better solution, especially if designers are involved.

Answer 3

For accessibility reasons these should be created as a set of <a> tags inside the list. This is so that a screen reader/ keyboard tab will stop on the hyperlink.

You can then use pseudo-classes (states) such as hover in css so this will work even if script is disabled.

a:link {background-colorr:#FF0000;}      /* unvisited link */
a:visited {background-color:#00FF00;}  /* visited link */
a:hover {background-color:#FF00FF;}  /* mouse over link */
a:active {background-color:#0000FF;}  /* selected link */