Akkordeon- oder Aufklapp-Effekt bei TYPO3 Datensätzen – ohne Extension

Früher gab es z.B. mal die Extension „Kiwi Accordion“, um einen Datensatz anhand seiner Überschrift auf- und zuklappbar zu machen. In Zeiten von Fluidtemplates kann man sich die Funktion leicht selbst erstellen.

Was erreicht werden soll ist, dass man jeden Datensatz als geschlossenes Element darstellen kann, dessen Inhalt erst erscheint, wenn man auf die Überschrift klickt (bzw. dass der Datensatz geöffnet ist und durch Klick auf die Überschrift geschlossen werden kann).
Zunächst definiert man die entsprechenden Rahmen für Inhaltselemente im Page TSConfig:

TCEFORM.tt_content.frame_class {
    addItems {
        acc-closed = Akkordeon geschlossen
        acc-open = Akkordeon offen
    }
}

Damit gibt es die Möglichkeit, jeden Datensatz über Erscheinungsbild / Rahmen mit der Option „Akkordeon geschlossen“ oder „Akkordeon offen“ zu markieren. Um die benötigten Klassen in das HTML zu bekommen, holt man sich die Datei Default.html (aus fluid_styled_content/Resources/Private/Layouts) und fügt folgendes in Zeile 6 (bzw. in den umschließenden div) hinzu:

...
<div id="c{data.uid}" class="{f:if(condition:'{data.frame_class}==acc-closed',then:'ce-accordion close')}{f:if(condition:'{data.frame_class}==acc-open',then:'ce-accordion')} ..." ...>
...

Der Rest ist ein bisschen CSS:

.ce-accordion.close h2, .ce-accordion.close h3 {
    cursor:pointer;
    padding-left:14px;
    background:url(../gfx/acc_arrow_down.png) no-repeat 0px 5px;
}
 
.ce-accordion h2, .ce-accordion h3 {
    cursor:pointer;
    padding-left:14px;
    background:url(../gfx/acc_arrow_up.png) no-repeat 0px 5px;
}
 
.close .ce-content {
    display:none;
}

Anmerkungen: natürlich muss die Gestaltung der Überschrift nicht – wie hier – mit einer Grafik geschehen. Besser ist es einen Font und die Pseudoklasse :before zu verwenden. Wenn man mehr Überschriftentypen als nur h2 und h3 benötigt, muss man diese natürlich hinzufügen. Noch wichtiger ist jedoch: die Klasse ce-content ist standardmäßig in Fluidtemplates nicht vorhanden und muss also hinzugefügt werden. Leider gibt es in fluid_styled_content keine solche einheitliche Klasse für den Inhalt eines Datensatzes. Man kann sich die Templates entsprechend bearbeiten (fluid_styled_content/Resources/Private/Templates) oder – vielleicht ohnehin besser – man macht den Akkordeoneffekt nur für bestimmte Inhaltselemente verfügbar, z.B. nur für das Element Text & Medien.
Das geht dann so:

TYPO3 frame Klassen nur für bestimmte Inhaltselemente

TCEFORM.tt_content.frame_class.types.textmedia {
    addItems {
    	acc-closed = Akkordion geschlossen
    	acc-open = Akkordion offen
	}
}

Macht man das so, kann man sich das mit .ce-content schenken und schreibt ins CSS:

.close .ce-textpic {
    display:none;
}

Zum Umschalten wird dann noch ein wenig Javascript (wie immer in Form von jquery) benötigt:

$(document).ready(function() {  
    $('.ce-accordion :header').on('click',function() {
        $(this).parent().parent().toggleClass('close');
    });
});