Accordion - offenes und geschlossenes Accordion toggler stylen

[derRenner]

Hallo,

ich verwende Accordion über jQuery.
(template habe ich entsprechend so geändert, dass das Accordion geschlossen ist)
Wie genau spreche ich den offene bzw geschlossenen toggler an?

Grundsätzlich spreche ich den toggler ja über die Klasse an - z.B:

.toggler { color:#b4bf54; background:url(images/images_css/acc_bg.jpg) repeat-x; background-position-y:40%; 
padding:4px 4px 4px 20px; border-radius:2px 2px 0 0; }
.toggler:hover { cursor:pointer; color:#333; }
.toggler.active { color:#c64934; }

So, jetzt ist die Schriftfarbe mal grün. Bei :hover wird sie grau und beim Öffnen wird sie rot.
Wenn ich das Accordion jetzt wieder schliesse, dann bleibt der toggler auf .active und ich kann ihn nicht mehr ansprechen.

Ziel sollte es sein, dass nach dem Schliessen der toggler wieder die ursprüngliche Schriftfarbe bekommt und bei :hover auch die Schriftfarbe wieder auf #333; ändert.

Kann mir hierbei jemand weiterhelfen?

DANKE schon mal!

[derRenner]

erledigt - so gelöst:
ich habe die komplette Liste der .class angesprochen ... und funzt

.toggler.ui-accordion-header.ui-helper-reset.ui-state-default.ui-accordion-icons.active.ui-corner-all { color:#b4bf54; }
.toggler.ui-accordion-header.ui-helper-reset.ui-state-default.ui-accordion-icons.active.ui-corner-all.ui-state-hover {color:#333;}

[Andreas]

.toggler {
  color: #b4bf54;
  background: url(images/images_css/acc_bg.jpg) repeat-x;
  background-position-y: 40%;
  padding: 4px 4px 4px 20px;
  border-radius: 2px 2px 0 0;
}
.toggler:hover {
  cursor: pointer;
  color: #333;
}
.toggler.ui-state-active {
  color: #c64934;
}

[derRenner]

DANKE Andreas,

das sieht natürlich viel sauberer aus und funktioniert genauso ... ist schon angepasst!

[darki777]

Vorsicht bei der Verwendung von background-position-x und background-position-y, diese werden von manchen Browser-Versionen nicht unterstützt, da diese in den orig. W3C Specs nicht als Standard definiert sind. D.h. nicht Future-Proof, daher lieber background-position verwenden um auf Nummer sicher zu gehen.

[Andreas]

Stimmt, ich hatte auch nur sein CSS kopiert. Habe selbst noch nie background-position-x benutzt. Ist das von Contao generiert?

[derRenner]

DANKE @darki777! Daran hatte ich natürlich nicht gedacht ... habe jetzt 'background-position' verwendet - und das klappt natürlich genauso gut

@Andreas, nein das ist nicht von Contao generiert - das habe ich selbst im (externen) style-sheet eingetragen.