Für TYPO3: Bootstrap-Akkordeon ohne Extension

25.06.2014
Bootstrap Akkordeon

Wir verwenden gerne TYPO3. Dabei möchten wir möglichst wenige Extensions einbinden (Ausführliches dazu hier). Wer auf seiner Website das Bootstrap-Framework eingebunden hat, kann dessen Collapse-Funktion nutzen und mit TypoScript ein Accordion für die Anzeige von aufklappbaren Inhalten bauen. Für die Inhaltselemente Text und Text mit Bild findet Ihr unten den Code.

Im Inhaltselement soll unter Erscheinungsbild -> Einrückung und Rahmen eine zusätzliche Option Akkordeon erscheinen. Dazu wird Code 1 in die Page TsConfig der Seite eingetragen, auf der die Option zur Verfügung stehen soll, sonst natürlich in der Root-Seite Eurer Website.

Jetzt ist die zusätzliche Option im Backend anwählbar. Für den Dropdown-Effekt im Frontend wird das TypoScript angepasst (Code 2).

Bitte beachtet, dass jQuery und das Bootstrap-JavaScript eingebunden sein müssen.

Foto: © Otto Durst - Fotolia.com

Code: 
# Code 1
TCEFORM.tt_content.section_frame {
  addItems.100 = Akkordeon
}
# Code 2
# Wenn die Option "Akkordeon" angewählt ist, erhält die Überschrift 
# als Wrap das Bootstrap-Markup. Im Attribut data-target ist die 
# ID des Elements festgelegt, das durch Anklicken des Headers 
# auf- und zugeklappt wird. Durch die Eigenschaft dataWrap bleiben 
# die IDs eindeutig, da sich die Zahl bei jedem neuen Element um 1 erhöht.
 
lib.stdheader.stdWrap.outerWrap.cObject = CASE
lib.stdheader.stdWrap.outerWrap.cObject {
    key.field = section_frame
    100 = TEXT
    100.value = |
    100.stdWrap.dataWrap = <div data-toggle="collapse" data-target="#acc-{cObj:parentRecordNumber}">|</div>
  }
 
# Wenn die Option "Akkordeon" angewählt ist, erhält der Container 
# für das Element "Text mit Bild" als Wrap das Bootstrap-Markup. 
# Auch hier wird durch dataWrap die #Eindeutigkeit der IDs sichergestellt. 
 
tt_content.textpic.20.stdWrap.outerWrap.cObject = CASE
tt_content.textpic.20.stdWrap.outerWrap.cObject {
    key.field = section_frame
    100 = TEXT
    100.value = |
    100.stdWrap.dataWrap = <div id="acc-{cObj:parentRecordNumber}" class="collapse out"> | </div>
  }
 
#Derselbe Effekt wie davor, diesmal für das Element "Text". 
 
tt_content.text.20.stdWrap.outerWrap.cObject = CASE
tt_content.text.20.stdWrap.outerWrap.cObject {
    key.field = section_frame
    100 = TEXT
    100.value = |
    100.stdWrap.dataWrap = <div id="acc-{cObj:parentRecordNumber}" class="collapse out"> | </div>
  }
 
# Ohne diese Zeilen würde durch den vorherigen Code der Textteil 
# des Elementes "Text mit Bild" erneut den Wrap erhalten und 
# dauerhaft verschwinden.
tt_content.textpic.20.text.20 < tt_content.text.20
tt_content.textpic.20.text.20.stdWrap.outerWrap.cObject.100.stdWrap.dataWrap >
Bild des Benutzers alexander

Alexander Künzl

Alexander Künzl ist seit 2012 im Unternehmen und kümmert sich um Projektmanagement, Suchmaschinenoptmierung und Webmarketing. Das Content Management System seiner Wahl ist TYPO3.