„Unsere Seite ist zu lang. Das erschlägt die Benutzer!“ — „Wohin mit den Details für Zielgruppen?“ — „Wir sollten nicht so viele Unterseiten einrichten.“
Wenn Ihr Redaktionsteam mit so etwas hadert, könnte das Akkordeon eine Lösung sein.
Es ist ein echtes Raumwunder. Es verstaut Inhalte so, dass die Seite schlank wirkt. Die Zusatzinhalte sind trotzdem alle da. Wechsel zu Unterseiten sind unnötig. Das freut besonders Besucher, die mit dem Finger im Handy-Bildschirm wischen. (40% unseres Publikums gehen mobil ins BiP.)
Unser Akkordeon ist eine Quetschkommode, deren Schuber aufspringen, wenn man auf die Beschriftung tippt. Das Geheimnis des Auf-und-Zu steckt in JavaScript-Befehlen. Es lässt sich viel flexibel festlegen: Länge, Format, Umfang und welche Bereiche geöffnet sein sollen.
Ein Lieblingsinstrument

Lya Großmaß mag kein Übermaß. Sie mag aufgeräumte, kompakte Seiten. Das Akkordeon findet sie darum „ganz wunderbar“. Es sieht gut aus und spart Platz. „Umfangreiche Inhalte können schnell gebündelt, durch Aufklappen und wieder Zusammenklappen übersichtlich gemacht werden.“
Aus ihren Redaktionsteams Ganztag, Inklusive Schule und Europa hat Großmaß gute Beispiele parat, wie Akkordeons Fachbegriffe, Zielgruppen-Infos, FAQ und Programmzweige auffächern:
- Glossar Ganztag A–Z
- Frankreich-Austausch (Screenshot rechts)
- Förderschwerpunkte
Lange Seiten ließen sich so besser strukturieren, rät die Förderschullehrerin von der Astrid-Lindgren-Schule Ilsede bei Peine. Natürlich sei etwas Mitarbeit gefordert. Aber sie traut dem Publikum die aktive Auswahl zu. „Der Nutzer zieht bei Bedarf die Information heraus, die er benötigt.“
Hauptsachen in den Haupttext
Das Akkordeon garantiert effiziente Raumbewirtschaftung. Aber wer Seiteninhalte so zusammendrückt, versteckt sie auch. „Das hat ein paar Nachteile“, sagt Eike Kracke-Helm, Anwendungsentwickler am NLQ.
„Manche Leute verstehen nicht gleich, was sie machen sollen. Sie sehen die Beschriftung, aber sie wissen nicht, dass das ein Schalter ist und dass etwas aufgeht, wenn sie draufklicken.“ Darum sollte man deutlich zum Klicken auffordern. „Call to action“, empfiehlt Kracke-Helm.
Der Klickreiz müsse groß genug sein. „Akkordeon-Überschriften sollten knackig, interessant und sofort verständlich sein. Also besser keine Abkürzungen.“ Er warnt auch vor zu viel Inhalt, also übervollen Akkordeons. „Da wären mir ein paar ordentlich gemachte Unterseiten lieber.“
Hauptsachen gehören in den Haupttext – nicht in die Nische. Kracke-Helm weiß: „Manche Leute sind faul oder überfliegen die Seite nur. Sehen sie nicht gleich, was sie suchen, springen sie ab. Wer ungeduldig ist, wird nicht im Akkordeon kramen.“
Redakteurin Lya Großmaß kennt noch einen Fallstrick. „Suchmaschinen-Optimierung ist mit Akkordeons eine Herausforderung“, hat sie festgestellt. Denn wenn Google oder Bing Seiten auslesen, werden Akkordeon-Inhalte oft nur teilweise oder gar nicht erfasst. Auch darum achtet Großmaß darauf, wichtige Schlüsselbegriffe nicht im Akkordeon zu verstecken.
Lernvideo und Bild-für-Bild-Anleitung
Anleitungen für das Akkordeon gibt es im offiziellen Typo3-Dokumentations-Blog und vielerorts im Netz, zum Teil mit Videos.
In diesem Video (1:13 Min., April 2024) führt Fachredakteurin Lya Marley (geb. Großmaß) durch die Schritte, um ein Akkordeon im Bildungsportal anzulegen und zu beschriften.
Auch im internen Redaktionsbereich des Typo3-Handbuchs finden Sie ein kurzes Tutorial mit Screenshots. Sie müssen eingeloggt sein. Die Seite ist nur für Personen mit Typo3-Zugang einsehbar: https://bildungsportal-niedersachsen.de/handbuch/typo3-bip-handbuch/2-4/akkordeon