Accordion

Hier ein Beispiel wie das Accordion aussehen könnte. In der aktuellen sfjquery-Version habe ich bereits ein Script integriert, mit dem Ihr Euer eigenes Accordion erstellen könnt.

Wie Ihr bestimmt schon festgestellt habt, sind die Tabs in der falschen Reihenfolge. Wenn Du magst kannst Du die Tabs mit Hilfe von Drag&Drop neu anordnen.

Ich bin die Überschrift für Tab 1

Dieser Tab wird als erstes angezeigt. Er beinhaltet nur Text und nichts anderes als reinen Text.

Weiter geht's mit der 2

In diesem Tab seht Ihr, dass nicht nur Text, sondern auch sämtliche Block-Tags wie Überschriften möglich sind.

Überschrift innerhalb Tab 2

Überschrift innerhalb Tab 2

Überschrift innerhalb Tab 2
Stefan Frömken

Templatemaschine in Tab 3

Natürlich kann auch hier der Content mit TypoScript verknüpft werden. So wurde dieses Bild zum Beispiel mit Hilfe des Gifbuilders erstellt:

Der Quellcode zu Tab 3

TypoScript

10 = TEMPLATE
10.template < temp.template
10.marks.BILD = IMAGE
10.marks.BILD {
	file = GIFBUILDER
	file {
		XY = [10.w]+20 ,100
		backColor = #8E999F
		10 = TEXT
		10 {
			angle = 45
			fontColor = #333333
			fontSize = 24px
			offset = 25,95
			shadow.color = #EE6B11
			shadow.offset = 5,0
			text = Tolles Bild
		}
	}
}

Obwohl die Tabs schon sortierbar sind, so sind Elemente innerhalb diesen Tabs auch noch sortierbar. Probiert's mal aus.

  • Apfel
  • Birne
  • Möhre
  • Kiwi