Mehrere Accordions mit unterschiedlichen Styles [GELÖST]

**Sebeljaner** · 25.04.2015, 21:21

Hallo liebe Community,

derzeit bin ich dabei eine Webseite umzugestalten. In der aktuellen Version gibt es schon mehrere Accordions (Einzelelemente) auf einer Seite, aber alle im gleichen Stil. Nun möchte ich diese Accordions unterschiedlich gestalten.
Jeder Toggler soll eine andere Farbe erhalten. Ich habe nun versucht mit Css und Klassen dort zu arbeiten. Allerdings nimmt entweder Contao die ursprüngliche Toggler-Version oder das Accordion funktioniert nicht mehr.
Ich habe auch schon im Template versucht das anzupassen, aber das wird vom Accordion völlig ignoriert.

Wie kann man also mehrere Einzelelemente von Accordions die auf der selben Seite sind unterschiedlich gestalten?

Vielen Dank!
Sebastian

**tab** · 25.04.2015, 22:21

Gib die CSS-Klasse doch dem jeweiligen Einzelelement. Darüber kannst du den zugehörigen Toggler doch auch selektieren.

**Sebeljaner** · 25.04.2015, 22:52

Tja, das habe ich versucht, aber irgendwie funktioniert das nicht oder ich mache was falsch. So habe ich das aufgebaut:

Code:

#main .ce_accordion .klasse1 {
    width:90%;
    border-right:1px solid #696969;
    border-bottom:1px solid #696969;
    border-left:1px solid #696969;
}

#main .ce_accordion .klasse1 .toggler {
    width:50%;
    padding-right:10px;
    background-image:url("files/.....plus.gif");
    background-position:left center;
    background-repeat:no-repeat;
    font-size:12px;
    font-weight:bold;
    color:#363636;
}

#main .ce_accordion .klasse1 div.active {
    background-image:url("files/.....minus.gif");
    background-position:left center;
    background-repeat:no-repeat;
}

Im Inhaltselement:

Klassennamen:
Feld 1: (wenn hier entwas anderes steht als toggler funktioniert das Akkordeon nicht mehr)
Feld 2: (hierüber funktioniert das ansprechen auf den Inhalt des Akkordeons)

Experten-Einstellungen:
Hier habe ich die Klasse eingegeben.

Wo könnte das Problem liegen?

**tab** · 25.04.2015, 23:13

Zumindest bei Einzelelementen ist die section, die den Toggler und den Text enthält, das Element mit der Klasse ce_accordion. So wie ich es verstanden habe und es auch selbst versuchen würde, wird diesem Element auch die Klasse klasse1 zugewiesen. Somit selektiert dein Selektor "#main .ce_accordion .klasse1" nichts. Es müsste "#main .ce_accordion.klasse1" heißen, also ohne das Leerzeichen zwischen den Klassen.