Zum Inhalt springen

Anleitung zum Erstellen eines Akkordeons

1. Anwendungsgebiet

Akkordeons sind eine gute Möglichkeit, lange, strukturierte Inhalte übersichtlich darzustellen. Verwenden Sie dieses Element, wenn Besucher:innen der Seite gezielt Informationen benötigen und selten den gesamten Text lesen müssen. Ein gutes Beispiel für die Verwendung sind FAQs. Hier sollten Nutzer:innen schnell zum gewünschten Punkt springen können und nicht von Textmassen überwältigt werden.

Das Akkordeon besteht in der Regel aus einem Container-Element und den darin enthaltenen einzelnen Panels (Fächer). Ein Panel entspricht einem Absatz mit Überschrift. Der Container ist nicht als solcher im Frontend erkennbar, sondern dient im Hintergund der optimierten Darstellung. Sie entscheiden im Backend, welches Panel "aktiv" - also geöffnet sein soll, wenn ein:e Benutzer:in auf der Seite landet. Sobald ein:e Benutzer:in auf eine Überschrift klickt, öffnet sich das darunterliegende Panel und der darin enthaltene Absatz kann gelesen werden.

NEU im Typo3 11 ist, dass ein Panel auch dann geöffnet bleibt, wenn ein weiteres Panel geöffnet wird. Bisher war es so, dass immer nur ein Panel geöffnet werden konnte. Das Öffnen und Schließen der Panels kann nun also aktiv gesteuert werden. Bei Bedarf können auch alle Panels gleichzeitig geöffnet sein. Diese Änderung wurde in Abstimmung mit der Agentur anatom5 vorgenommen, um das Akkordeon für alle Nutzer:innen noch bedienfreundlicher zu gestalten. So kann durch die geöffneten Panels u.a. der Text im ganzen gedruckt werden oder eine Suche darüberlaufen.

Das Akkordeon empfiehlt sich nicht für wichtige Texte, die vollständig bzw. zusammenhängend gelesen werden sollten oder für interakive Elemente wie Formulare, die nach dem Absenden möglicherweise Rückmeldungen erfordern. In diesem Fall könnte es nämlich sein, dass das Panel nach dem Absenden (Neuladen der Antwortseite) geschlossen und eine Meldung darin übersehen wird.

Bedenken Sie auch, dass Besucher, die über Google auf die Seite kommen, den erwarteten Text wahrscheinlich nicht unmittelbar sehen können. Es ist also wichtig, sehr aussagekräftige Überschriften zu finden.

Beispiel für ein Akkordeon

2. Erstellung

Nachfolgend wird anhand von Bildern erläutert, wie ein Akkordeon zu erstellen ist.


 

Um ein Akkordeon anzulegen, klicken Sie auf "+Inhalt" ("Neues Inhaltselement erstellen").

Das Akkordeon gilt als sogenanntes Container-Element und ist dementsprechend in den Inhaltselementen im Reiter Container zu finden. Schon ist der Grundstein gelegt. Fehlen nur noch die Panels und deren Inhalte:

Auf dem Reiter 'Raster-Elemente' befindet sich das Element 'Akkordeon'. Ein Klick darauf erzeugt den äußeren Container für den danach anzulegenden Akkordeon Multicontainer.

Nun den Vorgang mit 'Speichern und Schließen' beenden.

Als nächstes wird im Element 'Akkordeon' über das +Inhalt-Symbol der 'Akkordeon Multicontainer' angelegt.

Dieses Element erhält eine eindeutige Überschrift, die dem Namen des Akkordeon-Panels entpricht. Scrollt man ein wenig nach unten, findet man unter 'Erweiterungsoptionen' die Möglichkeit, einen Haken bei 'Ist Panel Aktiv?' zu setzen. Damit lässt sich einstellen, ob das entsprechende Panel beim Öffnen der Website bereits "aufgeklappt" und sofort lesbar sein soll.

In dem 'Akkordeon Multicontainer' kann nun ein (oder auch mehrere) beliebiges Element/ beliebiger Inhalt eingefügt werden. Um weitere Panels anzulegen, wird der nächste Multicontainer angelegt und wie gehabt mit dem gewünschten Inhalt befüllt.