In TYPOlight ist ein nettes MooTools-Plugin integriert, mit dem man sich Inhaltselemente mit einem Akkordeon-Effekt darstellen lassen kann. Den einzelnen Akkordeon-Elementen kann man im TYPOlight-Backend Überschriften zuweisen, die auch bei geschlossenem Element angezeigt werden.

Ich stand nun vor dem Problem, dass ich dieser Überschriftleiste eine andere Hintergrundfarbe zuweisen wollte, wenn das betreffende Element geöffnet ist, sodass man gleich optisch erkennen kann, welchem Akkordeon-Element der angezeigte Inhalt zuzuordnen ist.

Über die CSS-Klasse .toggler funktionierte dies nicht, da dann auch die nichtaktiven Elemente betroffen sind. In TYPOlight gibt es nun die Möglichkeit, Template-Vorlagen durch eigene zu ersetzen. Also habe ich im Menüpunkt „Templates“ im Backend ein „Neues Template“ hinzugefügt, bei dem ich als Vorlage das Template „moo_accordion“ im Abschnitt „Frontend“ ausgewählt habe. Dazu ist zu bemerken, dass ich mit dem RC2 der Version 2.8 arbeite. Ich weiß jetzt nicht, ob dieses Template bzw. der Abschnitt Frontend in der Version 2.7.x vorhanden ist. Das Template habe ich folgendermaßen angepasst:

 

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
alwaysHide: true,
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('background-color', '#dea303');
},
onBackground: function(toggler, element){
toggler.setStyle('background-color', '#7EB211');
}
});
});
//--><!]]>
</script>

In die Templatevorlage habe ich die gelb hervorgehobenen Zeilen Code hinzugefügt, sodass die Vorlage dann wie oben aussieht. Et voilà, fini.

Wichtig ist dabei, das onBackground zu definieren. Lässt man es weg, bekommen alle geöffneten Elemente  den bei onActive zugewiesenen Hintergrund. D. h. der Hintergrund bleibt dann auch erhalten, wenn sie wieder durch Anklicken eines anderen Elements geschlossen werden.