Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03506.jsonl.gz/771

Akkordeon
Kurzanleitung
Ein Akkordeon 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.
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.
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.
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.
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.
4.1 Anker in der Zielseite setzen
Ein Link kann direkt auf eine bestimmte Sektion im Akkordeon verlinkt werden, damit dieser Abschnitt beim Seitenaufruf direkt geöffnet wird. Dazu muss als erstes auf der entsprechenden Seite die Überschrift der Sektion mit einem Anker versehen werden.
4.1.1 Falls die Zielseite eine statische Seite ist
Dazu den Cursor vor den entsprechenden Titel setzen und über das Anker-Icon ein Anker mit entsprechendem Namen setzen.
4.1.2 Falls Zielseite aus dem eGovernment-Modul kommt
Falls die Zielseite aus dem eGovernment-Modul kommt, muss der entsprechenden Organisation der Ankername mitgegeben werden. Dazu kann die Organisation im GOViS unter "E-Government > Organisation" bearbeitet werden. Unter dem Reiter "Zusatzangaben" kann ein Direktlink angegeben werden. Genau dieser Link kann dann über die Url aufgerufen werden.
4.2 Sicherstellen, dass die Anker berücksichtigt werden
Ebenfalls muss sichergestellt werden, dass im Akkordeon-Modul, welches auf dieser Seite platziert ist, das Häkchen bei "Anker nicht berücksichtigen" nicht gesetzt ist.
4.3 Link setzen
Der Anker kann dann über den Link angesprochen werden, in dem man dem Link für die Seite (z.B. www.aarau.ch/guidelines/akkordeon.html/149) noch den Link für den Anker (#ankername) anhängt. Dies ergibt einen Link der folgendermassen aussieht: www.aarau.ch/guidelines/akkordeon.html/149#ankername.
Der Anker kann auch beim Setzen von internen Links ausgewählt werden. Dazu einen internen Link setzen, danach in den Linkeinstellungen auf "Anker laden" klicken, um die Anker der Seite anzuzeigen, welche dann ausgewählt werden können (z.B. Link auf Sektion).