Direkt zum Inhalt springen
Menü

Beeindruckend: Staraufgebot am grössten Hip Hop-Festival Europas.

Akkordeons

Ein Akkordeon (engl. Accordion) ist ein Navigationselement, das für gewöhnlich im Inhaltsbereich einer Website verwendet wird. Man spricht in diesem Zusammenhang auch von Content-Navigationen. Das Accordion dient dazu, umfangreiche Listen mit Inhalten platzsparend abzubilden. In der Regel verfügt jeder Eintrag der Liste über einen Titel und eine Beschreibung. Per Klick auf den Titel wird die Beschreibung eingeblendet. Die Beschreibungen der anderen Einträge werden versteckt. 

Kurzanleitung

1. Vorlage einfügen

Editor-Werkzeugleiste mit hervorgehobenen Vorlage-Icon
Vorlage-Symbol im Editor

Als Grundlage muss ein Akkordeon-Container auf der Inhaltsseite eingefügt werden. Dieser steht im Editor in den Vorlagen (Allgemeinde Inhaltsvorlagen > Akkordeon-Container) zur Verfügung.

Vorlage-Manager
Vorlage-Manager mit Akkordeon-Vorlage

Der Akkordon-Container definiert den Block, auf dessen Inhalt das Akkordeon angewendet wird. Dies kann der gesamte Inhaltsbereich im Editor sein, aber auch nur ein (oder mehrere) bestimmte Bereiche. Die eingefügte Vorlage erzeugt im Editor einen roten Rahmen um den betroffenen Inhalt.
Im HTML-Code wird der Container durch <div class="accordion"></div>  definiert.

Editor mit eingefügter Vorlage. Der rote Rahmen definiert den Akkordeon-Bereich.

2. Inhalte strukturiert erfassen

In der Vorlage sind bereits zwei Überschriften (Ebene 2) mit Inhalten platziert. Es können beliebig weitere Überschriften der gleichen Ebene mit nachstehenden Inhalten ergänzt werden. Alle Überschriften der Ebene 2 werden später auf der Website als Akkordeon-Titel angezeigt, der Inhalt darunter wird versteckt.

Wichtig ist, dass der strukturierte Inhalte auch ohne Akkordeon-Funktionalität Sinn macht und die Struktur der Seite optimal abbildet.

3. Akkordeon-Modul auf Seite einfügen

Damit aus dem Akkordeon-Bereich und dem darin strukturierten Inhalt nun auf der Website ein Akkordeon gerendert wird, muss auf jeder Seite mit einem Akkordeon das entsprechende Modul als zusätzlichen Content-Block eingefügt werden. Erst dies aktiviert das Akkordeon und steuert seine Einstellungen.

In der Regel wird es nicht nötig sein hier Einstellungen anzupassen. Was allenfalls nötig sein könnte ist das Element für die Überschriten (Standard: h2) zu ändern. Dies kann dann nötig sein, wenn tiefere Ebenen als die Überschriften 2 als Akkordeon-Ebenen gewünscht sind. Entsprechend muss der Inhalt unter Punkt 2 mit der hier definierten Überschriften-Ebene harmonisiert werden.

Akkordeon-Modul
Einstellungen des Akkordeon-Moduls. 

Achtung

Setzen Sie das Akkordeon gezielt an sinnvollen Stellen ein und überanspruchen Sie den Effekt nicht. In der Regel ist es sinnvoller, Akkordeons nur auf Teilbereiche einer Inhaltsseite anzuwenden und Einleitung oder andere wichtige Elemente direkt und ohne Akkordeon zu zeigen.