20. 04. 2021, 10:23

Hallo,
in einem Projekt versuche ich die im Netz gefundene Variante umzusetzen, das accordion-Script von jqery-ui einzubinden.

Dazu habe ich unter "https://blog.sbtheke.de/web-development/typo3/typo3-accordion-mit-gridelements" eine ältere Variante/Beschreibung gefunden, welche ich nicht zu 100% realisiert bekomme.

Ich bin wie folgt vorgegangen:
1. über das page-Element die nötige .css und .js - Dateien einbinden

[code]page.includeCSS {
105 = https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
}

page.includeJSLibs {
jquery = https://code.jquery.com/jquery-1.12.4.js
jquery.external = 1
jqueryui = https://code.jquery.com/ui/1.12.1/jquery-ui.js
jqueryui.external = 1
accordion_init = EXT: meineTemplateExtension/Resources/Public/JavaScript/accord.js
}
[/code]

2. Die Datei "accord.js" ist das Init-Skript, damit das jquery-Accordion läuft. Der Inhalt ist

[code]$( "#accordion" )
.accordion({
header: "> ul > li > div > header > h2"
collapsible: true,
active: false,
});
[/code]

3. Jetzt habe ich das Content-Grid für das Accordion erstellt (unter meineTemplateExtension/Configuration/TSconfig/Gridelements.tsconfig). Diese Datei habe ich auch (unter meineTemplateExtension/ext_localconf.php) entsprechend eingebunden.

[code]tx_gridelements.setup {
accordion {
title = Accordion
icon = EXT:meineTemplateExtension/.../accordion.png
flexformDS = FILE:EXT:meineTemplateExtension/Configuration/TypoScript/Setup/gridelements_accordion.xml
config {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = accordion
colPos = 10
}
}
}
}
}
}
}
[/code]

4. Jetzt habe ich die FlexForm-Datei gridelements_accordion.xml erstellt. Hier habe ich die komplette Flexform eingegeben, welche bei Sven Burkert zu finden sind. Aus diesem Flexform wird in der Originalen Anleitung ein separates DIV mit ausgegeben, welches in die Variable "options" gepare-t wird. Zu Testzwecken habe ich die Optionen für das jquery-ui-accordion aber in der obigen accordion.js - Datei stehen.

5. Jetzt habe ich das TypoScript für das Content-Grid des Accordions erstellt in einer Datei, welche im Setup-Typoscript meiner TemplateExtension abgelegt ist (meineTemplateExtension/Configuration/TypoScript/Setup/ext.gridelements.typoscript).

[code]tt_content.gridelements_pi1.20.10.setup {
accordion < lib.gridelements.defaultGridSetup
accordion {
columns {
default.renderObj.wrap = <li class="accordionItem">|</li>
}
wrap.stdWrap.cObject = COA
wrap.stdWrap.cObject {
10 = TEXT
10.value = <ul class="accordionContents">|</ul>
}
}
}
[/code]

6. Ergebnis:
Ich kann im Backend entsprechend ein GridElement "Accordion" erstellen. In diesen Grid-Container kann ich anderen Content ziehen bzw. neuen Content erstellen.
Im Frontend wird mir aber kein funktionierendes Accordion erstellt.

Im Source-Code der generierten Seite finde ich folgende Struktur.

[code]<div id="accordion"> <ul class="accordionContents"> <li class="accordionItem"> <div id="c5"> <header><h2 class="">Content-Überschrift-1</h2></header> <div class="ce-texpic"> <div class="ce-bodytext"> Content-Text
</div> </div>
</div>
</li> <li class="accordionItem"> <div id="c6"> <header><h2 class="">Content-Überschrift-2</h2></header> <div class="ce-textpic"> <div class="ce-bodytext"> Content-Text
</div>
</div>
</div>
</li>
</ul>
</div>
[/code]

Ich habe die Struktur mal außerhalb von Typo3 probiert, und ich denke, es liegt an dem <header> - Element. Denn die Accordion-Tabs werden korrekt erstellt, bei Anklicken ändert sich auch das Icon für "Active", aber der Inhalt des Divs unterhalb der Überschrift klappt nicht auf und zu, sondern ist die ganze Zeit aufgeklappt, also kein "collapsible".

Hat einer eine Idee, was an meiner Einbindung noch fehlt?
Wenn das mit dem "collapsible" korrekt funktionieren sollte, dann muss ich mir das korrekte Parsen der aus der FlexForm generierten Werte anschauen, denn da bin ich mir nicht sicher, dass das korrekt funktioniert. Denn mit dem Original-Init-Script von Sven Burkert klappte nämlich m.E. gar nichts.

Ich habe dann nochmal in der Datei accordion.js folgende Änderung vorgenommen

[code]header: "> ul > li > div > header",
[/code]

dann sieht es wie in der beiliegenden Grafik aus.
ABER ... jetzt funktioniert zwar "collapsible", aber es sieht bescheiden aus. Das muss doch aber anders funktionieren, oder?

Und wenn ich in einem Accordion-Element dann einen weiteren Grid-Container hätte (bspw. 3-spaltiges CE), dann wird dieses außerhalb des Accordions angezeigt.

Hat jemand eine schlaue Idee für mich, wie ich die Einbindung besser hinbekomme?

Vielen Dank.
Mfg