[TYPO3-german] Toggle Inhaltselement mit Gridelements (& FlexForm Konfig)

[JCL - Johannes C. Laxander]

> [mailto:typo3-german-bounces at lists.typo3.org] Im Auftrag von Martin
> Gesendet: Mittwoch, 6. März 2013 07:34
> 
> Hallo,
> 
> sollte dieser Beitrag nicht in diesen Forenbereich passen, 
> dann bitte ich dies zu entschuldigen.
> 
> Ich möchte ein Toggle FCE mit der Extension Gridelements erstellen.
> 
> Dazu habe ich folgenden Beispielcode:
> 
> ...


So "umständlich" musst du das gar nicht machen...


> ...
> 
> So sollte es in etwa aussehen.
> 

Hier ein Beispiel das ich erst vor wenigen Tagen gemacht habe:
http://www.khp-yachtcharter.com/service/dies-und-das/coole-drinks.html#c1013

> ABER: Wie kann ich die Flexform Konfig so ändern, dass ich 
> beliebig viele Toggle Elemente haben kann, mit nen Plus 
> Zeichen oder so.
> 
> Und wie verbinde ich eine fertige Konfiguration mit dem oben 
> genannten Beispiel Quellcode der Frontendausgabe? 

Die Zutaten sind: gridelemenets, Typoscript, jQuery

1. Im BE ein ganz einfaches FCE (Backend CE) anlegen, z.B.:
backend_layout {
	colCount = 1
	rowCount = 1
	rows {
		1 {
			columns {
				1 {
					name = Accordion Element
					colPos = 10
					allowed = CE's
				}
			}
		}
	}
}

2. BE Layout konfigurieren
# ID 8: FCE - Accordion Container
tt_content.gridelements_pi1.20.10.setup {
	8 < temp.gridelements.defaultGridSetup
	8 {
		columns {
			# colPos ID = 10 - Accordion Inhalt
			10 < .default
			10.wrap = <div class="accordion">|</div>
		}
	}
}

"8" musst du natürlich durch deine ID anpassen und auch ggf. die ID der colPos
Damit kannst du dann im Backend ein Rasterlement anlegen, welches den Container
für alle Accordion- bzw. Toggle-Inhalte bildet.

Innerhalb des Accordion-containers kannst du jetzt beliebig deine CEs einfügen,
so z.B. ein Text/Bild-Element. Jedes CE repräsentiert ein Accordion-/Toggle-Element.

3. Javascript
$(document).ready(function(){
	$( ".accordion" ).accordion( {header: "header", heightStyle: "content"} );
});

".accordion" musst du natürlich anpassen wenn deine Klasse z.B. ".toggle" heißt.
Mit "header" gibst du das Tag an, das den Accoridon-/Toggle-Titel darstellt.
Kann also z.B. auch H2 oder H3 sein, hängt von der gerenderten Seitenausgabe ab.
In meinem Fall war diese HTML5, deshalb auch das Tag "header".
Eine Doku des jQuery Accordion Widgets findest du hier:
http://api.jqueryui.com/accordion/

4. jQuery Lib und jQuery Accordion Widget
Jetzt musst du nur noch jQuery einbinden (am besten mit der Ext. t3jquery) und
auch noch die jQuery UI Styles:

http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css

Du kannst jQuery natürlich auch "von Hand" einbinden, dann brauchst du noch:
http://code.jquery.com/jquery-1.9.1.js
http://code.jquery.com/ui/1.10.1/jquery-ui.js


Das wars dann auch schon. Viel Erfolg!

Grüße, Johannes.